jQuery如何在元素上添加和删除CSS样式？-编程学习网

这篇文章将为大家详细讲解有关jQuery如何在元素上添加和删除CSS样式？，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

使用jQuery添加CSS样式

jQuery提供多种方法来向元素添加CSS样式。

addClass() 方法：

$("selector").addClass("classname");

例如：

$("p").addClass("red-text");

这将向所有 <p> 元素添加 "red-text" 类，该类可能在CSS中定义为具有红色文本。

toggleClass() 方法：

$("selector").toggleClass("classname");

toggleClass() 方法可用于添加或删除样式，具体取决于元素当前是否具有该样式。

css() 方法：

$("selector").css("property", "value");

css() 方法允许您设置或获取单个CSS属性的值。

例如：

$("h1").css("color", "blue");

这将使所有 <h1> 元素的文本变为蓝色。

使用jQuery删除CSS样式

jQuery也提供多种方法来从元素中删除CSS样式。

removeClass() 方法：

$("selector").removeClass("classname");

例如：

$("p").removeClass("red-text");

这将从所有 <p> 元素中删除 "red-text" 类，使其不再具有红色文本。

toggleClass() 方法：

如前所述，toggleClass() 方法可用于添加或删除样式，具体取决于元素当前是否具有该样式。

removeAttr() 方法：

$("selector").removeAttr("style");

removeAttr() 方法可用于删除特定属性或所有CSS样式。

例如：

$("p").removeAttr("style");

这将从所有 <p> 元素中删除所有内联样式。

综合示例

以下代码示例演示了如何使用jQuery添加和删除CSS样式：

// 添加 "red-text" 类到所有 `<p>` 元素
$("p").addClass("red-text");

// 删除 "red-text" 类从第一个 `<p>` 元素
$("p:first").removeClass("red-text");

// 使用 css() 方法为所有 `<h1>` 元素设置 "color" 属性
$("h1").css("color", "blue");

// 使用 removeAttr() 方法从所有 `<p>` 元素中删除 "style" 属性
$("p").removeAttr("style");

注意事项