jQuery css() 方法设置与获取样式详解

设置单个 CSS 属性

当需要针对匹配元素中的某一个具体样式进行更改时，可以使用两个参数的形式。第一个参数指定 CSS 属性的名称（字符串格式），第二个参数则是对应的目标值。

// 将所有段落背景色设置为黄色
$("p").css("background-color", "yellow");

这种写法简单直接，适用于只需要调整单项样式的场景。

批量设置多个 CSS 属性

如果需要同时修改一个元素的多种样式特征（如字体大小、颜色、边距等），可以传递一个包含属性名和属性值映射关系的 JavaScript 对象作为唯一参数。这种方式在代码上更为整洁，减少了 DOM 重绘的次数，性能相对更优。

// 批量设置段落的背景色和字体大小
$("p").css({
    "background-color": "yellow",
    "font-size": "200%"
});

在使用此方式时，请注意：

• 属性名需使用引号包裹，除非使用标准的驼峰命名法（如 backgroundColor）。
• 属性值通常也需要用引号括起来。

获取 CSS 属性值

除了设置样式，css() 方法还可以用作读取器。如果只传入属性名而不提供属性值，它将返回被选元素中第一个匹配元素对应样式的当前计算值（例如浏览器渲染后的像素值）。这对于需要根据当前样式进行逻辑判断（如动画停止检测）的场景非常有用。

// 获取第一段背景色的值
var bgColor = $("p:first").css("background-color");
console.log(bgColor); // 可能输出 'rgb(255, 255, 0)' 或 'yellow'