JavaScript操作CSS样式有两条核心路径：一是直接修改元素的style属性（内联样式），适用于一次性、条件性强的变更，但难维护；二是通过classList切换预设CSS类，推荐用于主题、状态和动画触发，更可控易调试；此外，需用getComputedStyle()读取真实渲染样式，CSS自定义属性则提供灵活的JS-CSS桥梁。
JavaScript 直接操作 CSS 样式，核心就两条路：改元素的 style 属性（内联样式），或改 class 列表（走 CSS 规则）。前者快但难维护，后者干净但得提前写好 CSS 类——别想着“用 JS 写一整套 CSS”，那不是交互，是自找麻烦。
直接改 style 属性：适合一次性、条件性强的变更
元素的 style 是一个 CSSStyleDeclaration 对象，只反映内联样式（即 HTML 里写的 style="..." 或 JS 赋的值），不读取外部 CSS 文件或 块里的规则。
-
element.style.color = "red"—— 注意是驼峰写法，background-color得写成backgroundColor - 设置带单位的值必须显式加字符串，比如
element.style.width = "200px"，写200会无效 - 读取时，
element.style.xxx只能拿到你亲手设过的值；如果样式来自 class 或继承，这里返回空字符串，不是计算后的结果 - 批量设样式？别连写一堆
.style.xxx，用Object.assign(element.style, { opacity: 0.5, transform: "scale(1.2)" })更稳
用 classList 切换预设 CSS 类：推荐用于主题、状态、动画触发
这是最可控、最易调试的方式。所有样式逻辑留在 CSS 里，JS 只管“开/关”开关。
-
element.classList.add("active")、.remove("hidden")、.toggle("loading")—— 支持多个参数，如.add("a", "b", "c") -
.contains("error")比className.includes("error")安全，不会误匹配子串（比如"enderror"） - 要替换整个 class 列表？直接赋值
element.className = "btn btn-primary"，但注意这会清掉所有现有 class，慎用 - 动态生成 class 名？可以，但得确保对应 CSS 已加载，否则白搭；也别用 JS 拼出几十个 class 来模拟 CSS 变量，那是倒退
读取真实渲染后的样式：用 getComputedStyle()，不是 style
当你需要知道元素当前实际显示的宽高、颜色、是否被隐藏等，必须用这个 API，它返回的是应用所有层叠规则（内联 + CSS 文件 + 浏览器默认）后的最终值。
立即学习“Java免费学习笔记（深入）”；
-
const cs = getComputedStyle(element)，然后cs.width、cs.backgroundColor—— 这里属性名仍是驼峰，且返回值全是带单位的字符串（如"rgb(255, 0, 0)"、"400px"） - 它返回只读对象，改它没用；也不能用来设样式
- 性能敏感场景慎用：频繁调用会强制浏览器同步重排（reflow），比如在
scroll或mousemove里反复查offsetTop，就该缓存或节流 - 想查伪元素样式？可以：
getComputedStyle(element, "::before")
避免踩坑：CSS 自定义属性（--my-color）怎么用 JS 控制
这是现代方案里最灵活的桥梁。CSS 变量本身不生效，但 JS 可以读写根元素或任意元素上的变量，CSS 规则自动响应。
- 设变量：
document.documentElement.style.setProperty("--main-color", "#333")（全局）或element.style.setProperty("--item-height", "60px")（局部） - 读变量：
getComputedStyle(document.documentElement).getPropertyValue("--main-color")，注意返回带空格的字符串，常需.trim() - 变量名区分大小写，
--Color和--color是两个东西 - 不要在循环里反复
setProperty同一个变量——CSS 引擎会重绘，但 JS 层面无感知；如有动画需求，优先考虑transition+ class 切换
真正难的从来不是“怎么改样式”，而是想清楚“谁该负责哪部分”。JS 不该替 CSS 做布局、做响应式、做颜色系统；它只该在用户行为、数据变化、异步完成这些时刻，轻推一下 class 或变量。漏掉这点，代码很快变成样式和逻辑搅在一起的意大利面。
