jQuery 操作CSS

jQuery的一個非常重要的部分是操縱DOM的可能性。

jQuery提供了有效地操作元素樣式的方法。

在本章中，我們將說明如何在DOM中添加或刪除CSS類。

jQuery操作CSS

使用jQuery，我們可以輕松地操縱元素的樣式。

我們有以下用于CSS操作的jQuery方法：

• addClass()

• removeClass()

• toggleClass()

• css()

下面將向您展示如何使用每種方法。

jQuery addClass()方法

jQuery addClass()方法將一個或多個類名稱添加到所選元素。

下面的示例將類名添加到第一個<p>元素：

$("button").click(function(){
  $("p:first").addClass("highlight");
});

一次可以將多個類（用空格隔開）添加到所選元素，如下所示：

$("button").click(function(){
  $("p:first").addClass("highlight big");
});

jQuery removeClass()方法

jQuery removeClass()方法從所選元素中刪除一個或多個類名稱。

下面的示例從所有<p>元素中刪除一個類名：

$("button").click(function(){
  $("p").removeClass("highlight");
});

一次可以從一組選定元素中刪除一個以上的類（以空格隔開），如下所示：

$("button").click(function(){
  $("p").removeClass("highlight big");
});

如果在參數(shù)中未指定類名，則將刪除所有類：

$("button").click(function(){
  $("p").removeClass();
});

jQuery toggleClass()方法

jQuery toggleClass()方法在添加/刪除所選元素中的一個或多個類名稱之間切換。

下面的示例在為所有<p>元素添加和刪除“ anotherClass”類名稱之間切換：

$("button").click(function(){
  $("p").toggleClass("anotherClass");
});

此方法檢查每個元素的指定類名稱：

• 如果缺少類名，則添加

• 如果已經(jīng)設置了類名，則將其刪除

jQuery css()方法

jQuery css()方法獲取或設置所選元素的一個或多個樣式屬性。

jQuery css()方法將在下一章中說明。

jQuery CSS參考

有關完整的CSS方法參考，請訪問我們的jQuery HTML / CSS參考。