jquery的css()方法最常用且易错的是传两个字符串参数设置单个样式，如$("#box").css("background-color","red")；属性名支持驼峰或短横线写法但不可混用大小写，数字值会自动补"px"需显式带单位，对象批量设置更高效，且css()安全合并内联样式而不覆盖。
直接用 css() 设置单个样式属性
最常用也最容易出错的方式：传两个字符串参数，比如 $("#box").css("background-color", "red")。注意属性名可以写成 backgroundColor（驼峰）或 "background-color"（带引号的 CSS 原生写法），jQuery 内部做了兼容处理，但别混用大小写如 "Background-Color"，部分浏览器可能返回 undefined。
常见错误现象：$("#box").css("margin", 10) 看似简洁，但 jQuery 会自动补 px → 变成 margin: 10px，而你本意可能是 margin: 10em 或 margin: 10%。这时候必须显式带单位：$("#box").css("margin", "10em")。
使用场景：适合临时高亮、悬停反馈、表单校验状态等一次性样式变更，不涉及复用或主题切换。
批量设置多个样式用对象字面量
比链式调用 .css("a", "b").css("c", "d") 更高效且可读，推荐写法：$("#box").css({ "width": "200px", "height": "100px", "background-color": "#eee" })。
容易踩的坑：
- 对象键名不能用短横线（如
"font-size"必须写成fontSize或加引号"font-size"） - 值如果是数字，jQuery 仍会默认加
px，所以opacity: 0.5必须写字符串"0.5"，否则变成"0.5px" - 不要在对象里写
!important——css()只操作style属性，无法注入!important
获取当前计算样式要小心返回值类型
$("#box").css("color") 返回的是浏览器计算后的值，不是你写的原始值。比如你写的是 color: red，它可能返回 "rgb(255, 0, 0)"；你写的是 font-size: 1.2em，它返回的是实际像素值如 "19.2px"。
这意味着：
- 不能靠
.css("display") === "none"判断隐藏状态 —— 如果元素是通过visibility: hidden或父级display: none隐藏的，display值仍是"block"（或默认值） - 颜色比较要用
getComputedStyle或统一转 RGB/HEX 处理，直接字符串对比大概率失败 - 想判断是否“真正不可见”，用
$(el).is(":hidden")更可靠
为什么不用 attr("style", "...") 直接写内联样式
有人图省事写 $("#box").attr("style", "color:red; width:200px;")，这会**完全覆盖**元素已有的 style 属性，包括其他 JS 动态设置或浏览器自设的样式（比如 transform、opacity 等动画残留值）。
而 css() 是安全合并：它只更新你指定的属性，其余保持不变。例如元素已有 style="transform: scale(1);"，再执行 $("#box").css("color", "blue")，结果是 style="transform: scale(1); color: blue;"。
唯一例外是当你明确需要清空全部内联样式时，才考虑 .attr("style", "")，但更稳妥的是 .css({})（空对象）或 .removeAttr("style")。
复杂点在于：css() 修改的是内联样式，优先级高于外部 class，但如果你后续用 addClass() 加了一个带 !important 的规则，那内联样式就失效了 —— 这种冲突往往在调试时被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
