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");
});

如果在参数中未指定类名，则将删除所有类：

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

jQuery toggleClass()方法

jQuery toggleClass()方法在添加/删除所选元素中的一个或多个类名称之间切换。

下面的示例在为所有<p>元素添加和删除“ anotherClass”类名称之间切换：

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

此方法检查每个元素的指定类名称：

• 如果缺少类名，则添加

• 如果已经设置了类名，则将其删除

jQuery css()方法

jQuery css()方法获取或设置所选元素的一个或多个样式属性。

jQuery css()方法将在下一章中说明。

jQuery CSS参考

有关完整的CSS方法参考，请访问我们的jQuery HTML / CSS参考。