jQuery css() 方法

上一节的 CSS 类适合"成组切换样式"，而 css() 方法用来直接读写元素的行内样式，适合只改一两个属性的场景。它既能当 getter 读取样式值，也能当 setter 设置样式。

演示 HTML：

<p id="note">样式示例文字</p>
<button id="btn">换色</button>

css() 获取样式值

css(属性名) 返回第一个匹配元素的该样式当前值（含从样式表继承来的）：

var color = $("#note").css("color");
console.log(color); // 输出：rgb(0, 0, 0)（浏览器会返回计算后的值）

说明：读到的多半是浏览器计算值，颜色常显示为 rgb() 格式，属正常现象。

css() 设置单个样式

css(属性名, 值) 直接写入行内样式，优先级高于外部样式表：

$("#btn").click(function () {
    $("#note").css("color", "red");
});
// 效果：点击按钮后文字变红

设置的值会写进元素的 style 属性，实时生效。

一次设置多个样式

传入一个"属性名: 值"的对象，可同时设置多项：

$("#note").css({
    "color": "white",
    "background-color": "#333",
    "font-size": "20px",
    "padding": "10px"
});
// 效果：文字变白、背景变深灰、字号 20px、内边距 10px，一次全部生效

属性名既可用引号包住的连字符写法，也可用驼峰写法（如 backgroundColor）。

属性名写法小技巧

两种命名都支持，混用也没问题：

$("#note").css("background-color", "yellow"); // 连字符写法
$("#note").css("backgroundColor", "yellow");  // 驼峰写法，效果相同

涉及透明度的 opacity、数值类的 width/height 都可直接给数字：

$("#note").css("opacity", 0.5).css("width", 300);
// 效果：透明度 50%，宽度 300px（jQuery 会自动补上 px 单位）

链式调用与回调

css() 支持链式调用；设置时也能用函数按原值加工：

$("#note")
    .css("color", "red")
    .css("font-size", function (i, old) {
        return (parseInt(old) + 4) + "px"; // 在原有字号上加 4px
    });
// 效果：先变红，再在原始字号基础上放大 4 像素

小结

css() 一个方法搞定读写：一参读取、两参写入、传对象批量设置。要"成组切换样式"选 addClass/removeClass，要"零散微调属性"则 css() 更直接。