jquery样式

jQuery 样式操作

jQuery 提供了多种方法来操作元素的样式，包括添加、移除、切换 CSS 类，以及直接修改 CSS 属性。以下是常见的样式操作方法：

添加 CSS 类

使用 addClass() 方法可以为元素添加一个或多个 CSS 类。
语法：

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

示例：

$("#myDiv").addClass("highlight");

移除 CSS 类

使用 removeClass() 方法可以移除元素的一个或多个 CSS 类。
语法：

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

示例：

$("#myDiv").removeClass("highlight");

切换 CSS 类

使用 toggleClass() 方法可以切换元素的 CSS 类（如果存在则移除，不存在则添加）。
语法：

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

示例：

$("#myDiv").toggleClass("highlight");

直接修改 CSS 属性

使用 css() 方法可以直接获取或设置元素的 CSS 属性。
获取属性值：

$("selector").css("propertyName");

设置属性值：

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

示例：

$("#myDiv").css("color", "red");

批量设置 CSS 属性

可以通过传递对象来批量设置多个 CSS 属性。
语法：

$("selector").css({
  "property1": "value1",
  "property2": "value2"
});

示例：

$("#myDiv").css({
  "color": "blue",
  "font-size": "20px"
});

注意事项

• 使用 css() 方法直接修改样式时，会以内联样式的方式添加到元素上，优先级高于外部样式表。
• 频繁操作样式时，建议使用 addClass() 和 removeClass()，而不是直接修改 CSS 属性，以提高性能。