jquery设置css属性

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

通过 jQuery 的 .css() 方法可以直接设置单个 CSS 属性。语法格式为：

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

示例：将 div 元素的背景色设置为红色

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

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

通过传递一个对象来批量设置多个 CSS 属性。语法格式为：

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

示例：同时设置 div 的宽度、高度和边框

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

动态计算属性值

可以在 .css() 方法中使用函数动态计算属性值。函数接收当前元素的索引和旧值作为参数。
示例：根据索引动态设置元素宽度

$("div").css("width", function(index, oldValue) {
    return (index + 1) * 100 + "px";
});

注意事项

• 属性名支持驼峰式（如 backgroundColor）或连字符式（如 background-color）。
• 数值类属性需包含单位（如 px、%），否则可能不生效。
• 修改后的样式会直接写入元素的 style 属性，优先级高于外部 CSS。

链式操作

.css() 方法支持链式调用，可与其他 jQuery 方法结合使用。
示例：设置样式后添加类名

$("div").css("color", "blue").addClass("highlight");