jQuery 操作CSS

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

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

在本章中,我们将说明如何在DOM中添加或删除CSS类。

jQuery操作CSS

使用jQuery,我们可以轻松地操纵元素的样式。

我们有以下用于CSS操作的jQuery方法:

下面将向您展示如何使用每种方法。

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参考