jquery修改style

使用 jQuery 修改元素的 style 属性

jQuery 提供了多种方法来修改元素的样式。可以通过直接操作 style 属性或使用 CSS 方法来动态修改样式。

修改单个样式属性

使用 .css() 方法可以修改单个样式属性。语法如下：

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

例如，将 div 元素的背景颜色改为红色：

$("div").css("background-color", "red");

修改多个样式属性

可以通过传递一个对象来同时修改多个样式属性：

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

例如，修改 div 的宽度和高度：

$("div").css({
    "width": "200px",
    "height": "100px"
});

获取样式属性的值

使用 .css() 方法并传入属性名可以获取当前样式值：

var color = $("div").css("background-color");
console.log(color); // 输出当前背景颜色

动态添加或移除类

通过 .addClass() 和 .removeClass() 可以动态添加或移除 CSS 类，从而间接修改样式：

// 添加类
$("div").addClass("highlight");

// 移除类
$("div").removeClass("highlight");

切换类

使用 .toggleClass() 可以在添加和移除类之间切换：

$("div").toggleClass("highlight");

直接操作 style 属性

如果需要直接操作 style 属性，可以通过 .attr() 方法：

$("div").attr("style", "background-color: blue; width: 300px;");

注意事项

• 使用 .css() 方法修改的样式是直接作用于元素的 style 属性，优先级高于外部 CSS。
• 修改多个属性时，建议使用对象语法以提高代码可读性。
• 动态添加或移除类是更推荐的做法，尤其是样式较复杂时，便于维护。