jquery修改style

使用 jQuery 修改元素的 style 属性

jQuery 提供了多种方法来修改元素的样式，可以直接操作 style 属性或通过 CSS 类实现。以下是常见的方法：

直接修改内联样式

使用 .css() 方法可以直接修改元素的 style 属性。该方法可以接受单个属性或一组属性。

修改单个样式属性：

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

修改多个样式属性：

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

添加或移除 CSS 类

通过操作 CSS 类可以更高效地批量修改样式。

添加 CSS 类：

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

移除 CSS 类：

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

切换 CSS 类（存在则移除，不存在则添加）：

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

获取当前样式值

使用 .css() 方法也可以获取元素的当前样式值。

获取样式值：

var color = $("#elementId").css("color");
console.log(color); // 输出当前颜色值（如 "rgb(255, 0, 0)"）

注意事项

• 直接修改 style 属性的优先级高于 CSS 类，可能覆盖外部样式表中的规则。
• 对于需要频繁切换的样式，建议使用 CSS 类而非直接操作 style 属性，以提高性能。
• jQuery 会自动处理浏览器兼容性问题，如 backgroundColor 和 background-color 的差异。