jquery设置样式

jQuery 设置样式的方法

jQuery 提供了多种方法来操作元素的样式，可以根据需求选择不同的方式。

使用 .css() 方法设置单个样式属性

通过 .css() 方法可以直接设置单个 CSS 属性。语法如下：

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

示例：

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

使用 .css() 方法设置多个样式属性

可以传递一个对象来同时设置多个样式属性：

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

示例：

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

使用 .addClass() 添加 CSS 类

通过添加预定义的 CSS 类来设置样式：

$(selector).addClass(className);

示例：

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

使用 .removeClass() 移除 CSS 类

移除元素上的某个 CSS 类：

$(selector).removeClass(className);

示例：

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

使用 .toggleClass() 切换 CSS 类

根据当前状态添加或移除 CSS 类：

$(selector).toggleClass(className);

示例：

$("#myElement").toggleClass("active");

使用 .attr() 设置样式属性

虽然不推荐，但可以通过 .attr() 方法直接设置 style 属性：

$(selector).attr("style", "color: green; font-size: 16px;");

注意事项

• 使用 .css() 方法会直接修改元素的 style 属性，优先级高于外部样式表。
• 使用类名操作（.addClass()、.removeClass()）更易于维护，适合复杂的样式管理。
• 动态修改样式时，考虑性能影响，避免频繁操作 DOM。