前端必知必会-jQuery - 获取和设置 CSS 类

文章目录

• jQuery - 获取和设置 CSS 类
• • jQuery addClass() 方法
  • jQuery removeClass() 方法
  • jQuery toggleClass() 方法
  • jQuery - css() 方法
  • • 返回 CSS 属性
    • 设置 CSS 属性
    • 设置多个 CSS 属性
• 总结

jQuery - 获取和设置 CSS 类

使用 jQuery，可以轻松操作元素的样式。

jQuery 操作 CSS
jQuery 有几种 CSS 操作方法。

• addClass() - 向所选元素添加一个或多个类
• removeClass() - 从所选元素中删除一个或多个类
• toggleClass() - 在向所选元素添加/删除类之间切换
• css() - 设置或返回样式属性
  示例样式表
  以下样式表将用于本页上的所有示例：

.important {
font-weight: bold;
font-size: xx-large;
}

.blue {
color: blue;
}

jQuery addClass() 方法

以下示例显示如何向不同元素添加类属性。当然，在添加类时，您可以选择多个元素：

示例

$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});

您还可以在 addClass() 方法中指定多个类：

示例

$("button").click(function(){
$("#div1").addClass("important blue");
});

jQuery removeClass() 方法

以下示例显示如何从不同元素中删除特定的类属性：

示例

$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});

jQuery toggleClass() 方法

以下示例将展示如何使用 jQuery toggleClass() 方法。此方法可在添加/删除所选元素的类之间切换：

示例

$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});

jQuery - css() 方法

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

返回 CSS 属性

要返回指定 CSS 属性的值，请使用以下语法：

css(“propertyname”);
以下示例将返回第一个匹配元素的背景颜色值：

示例
$(“p”).css(“background-color”);

设置 CSS 属性

要设置指定的 CSS 属性，请使用以下语法：

css(“propertyname”,“value”);
以下示例将设置所有匹配元素的背景颜色值：

示例
$(“p”).css(“background-color”, “yellow”);

设置多个 CSS 属性

要设置多个 CSS 属性，请使用以下语法：

css({“propertyname”:“value”,“propertyname”:“value”,…});
以下示例将为所有匹配的元素设置背景颜色和字体大小：

示例
$(“p”).css({“background-color”: “yellow”, “font-size”: “200%”});

总结

本文介绍了jQuery怎么获取和设置 CSS 类，如有问题欢迎私信和评论