css() 方法是 jQuery 里直接和页面视觉打交道的一个工具。它可以获取元素的某个 CSS 属性值，也可以给元素设置单个或多个样式。在需要动态调整界面外观的场景下，这个方法出现的频率相当高。
我平时做交互效果时，凡是涉及到颜色切换、尺寸变化、显示隐藏之外的微调，基本都会用到它。相比原生 getComputedStyle 那一套，css() 写起来简洁不少，而且自动处理了浏览器前缀和单位的兼容问题。
获取 CSS 属性值
$(selector).css("propertyname");
这个形式用来读取匹配元素中第一个元素的指定 CSS 属性值。关键词是“第一个”，后面即使有一组元素，它也只取首个的结果。
返回的值是计算后的样式，不是你在样式表里写什么它就原样返回什么。比如你在 CSS 里写 width: 50%，用 css("width") 拿到的会是换算好的像素值，而不是百分比字符串。
<p class="msg" style="background-color: #ff6600;">提示：操作已成功</p>
<button id="checkBtn">查看背景色</button>
<script>
$("#checkBtn").on("click", function() {
var bg = $(".msg").css("background-color");
alert("当前背景色 = " + bg);
});
</script>
点击按钮后弹出框显示的是 rgb(255, 102, 0) 这种浏览器计算后的格式。这是我在用 css() 取值时觉得需要留心的地方——别指望它原样返回十六进制写法，每个浏览器的序列化规则略有不同。
设置单个 CSS 属性
$(selector).css("propertyname", "value");
这种写把指定的属性和值应用到所有匹配元素上。和获取时的“只取第一个”不同，设置时会遍历整个，挨个生效。
<p class="post">第一段内容</p>
<p class="post">第二段内容</p>
<p class="post">第三段内容</p>
<button id="setColorBtn">统一高亮背景</button>
<script>
$("#setColorBtn").on("click", function() {
$(".post").css("background-color", "#fffacd");
});
</script>
点击按钮后，三个段落同时变为浅黄颜色背景。如果某个段落原本有内联样式，这里的设置会覆盖掉它。css() 设置属性本质上是在操作元素的 style 特性，权重高于外部样式表，但低于 !important 声明。
批量设置多个 CSS 属性
$(selector).css({
"propertyname1": "value1",
"propertyname2": "value2",
...
});
传入一个对象，一次调用同时挂上多个样式。这在需要做元素状态整体切换时比链式调用 css().css().css() 可读性高得多，性能上也少了几次函数调用开销。
<div class="card">这是一张卡片内容</div>
<button id="styleCardBtn">应用卡片样式</button>
<script>
$("#styleCardBtn").on("click", function() {
$(".card").css({
"background-color": "#f0f4f8",
"border": "1px solid #c0c8d0",
"border-radius": "6px",
"padding": "16px",
"font-size": "15px",
"color": "#333"
});
});
</script>
对象写法里属性名可以用驼峰式 backgroundColor，也可以用连字符 background-color，但要加上引号。我个人习惯直接写 CSS 原生的连字符形式加引号，看着和样式表里一致，眼睛更舒服。
css() 与 addClass() 的选择
很多人在处理样式变更时会纠结：到底是直接用 css() 硬编码样式值，还是预定义好 class 再通过 addClass() 切换。我的判断标准是这样的：
-
如果样式值是动态计算出来的，比如根据窗口宽度调整某个元素的尺寸、根据用户输入实时改颜色，用
css()更直接。 -
如果样式是固定的几种状态互相切换，比如“激活/未激活”“白天/夜间模式”，用
addClass()/removeClass()维护性更强。样式逻辑留在 CSS 文件里，JavaScript 只负责状态，职责分离更清晰。
我自己做过一个可拖拽调整大小的面板，拖拽过程中用 css("width", 计算值) 实时更新尺寸；但同时面板的激活态切换，用的是 toggleClass("active")。两种手段各司其职，代码结构会清爽很多。
本节课程知识要点
-
用
css("property")获取值时，返回的是浏览器计算后的结果，数值型属性通常带单位（如"14px"）。做数学运算前先用parseInt()或parseFloat()转换。 -
设置属性时，
css()往元素的内联样式上写东西。频繁对同一个 DOM 节点做多次单属性设置，不如用一个对象批量写入，减少页面重绘次数。 -
涉及动画过渡的效果，尽量用 CSS 的
transition配合addClass来触发样式变化，而不是在 JS 里反复调用css()改值。后者会让每帧都在 JS 层面计算，流畅度可能受到影响。 -
不要在循环里大量使用
css()做逐个元素的样式微调。如果业务确实需要，可以考虑用$().each()搭配一次批量的读写操作，或者直接切换预定义 class。 -
对于
display属性的控制，优先用show()/hide()/toggle()而不是css("display","none")，因为 jQuery 的显隐方记住元素原来的显示类型（block、inline 等），恢复时不会破坏布局。
