jquery添加样式

jQuery 添加样式的方法

jQuery 提供了多种方法来动态添加或修改元素的样式，以下是几种常用方式：

使用 .css() 方法

通过 .css() 方法可以直接设置或获取元素的 CSS 属性。支持单个属性或对象形式的多属性设置。

设置单个属性

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

设置多个属性

$("#element").css({
  "color": "blue",
  "font-size": "16px",
  "background-color": "#f0f0f0"
});

使用 .addClass() 方法

通过预定义的 CSS 类批量添加样式，适合复用已有样式规则。

添加单个类

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

添加多个类

$("#element").addClass("highlight bordered");

动态切换样式类

.toggleClass() 可在添加和移除类之间切换，适用于交互场景（如点击事件）。

$("#button").click(function() {
  $("#target").toggleClass("active");
});

链式操作示例

jQuery 支持链式调用，可组合样式操作与其他方法。

$("#element")
  .addClass("warning")
  .css("border", "2px solid red")
  .fadeIn(300);

注意事项

• 优先级问题：通过 .css() 直接设置的样式优先级高于 CSS 类，可能覆盖类中的定义。
• 性能建议：对多个元素批量操作时，使用 .addClass() 比直接设置 .css() 性能更优。
• 单位处理：数值类属性（如 width）需手动添加单位（如 px），否则可能不生效。

移除样式的方法

移除 CSS 类

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

重置内联样式

$("#element").css("color", ""); // 清空指定属性