要用 getComputedStyle 读取 CSS 自定义属性，必须用 getComputedStyle(el).getPropertyValue('--color-primary')，带双短横线前缀；返回值恒为字符串，未定义时为空字符串；修改需通过 el.style.setProperty('--name', 'value')，仅作用于内联样式；:root 变量需显式查 document.documentElement；频繁调用会触发强制同步布局，需缓存结果并注意浏览器兼容性。
如何用 getComputedStyle 读取 CSS 自定义属性？
直接读取元素上定义的 --color-primary 这类变量，不能靠 element.style，它只管内联样式。得用 getComputedStyle 获取计算后样式，再用 getPropertyValue 提取：
常见错误是漏掉前缀 --，比如写成 getComputedStyle(el).getPropertyValue('color-primary') —— 这会返回空字符串。
- 必须带双短横线：
getComputedStyle(el).getPropertyValue('--color-primary') - 返回值总是字符串，哪怕你设的是数字，比如
--spacing: 12读出来是"12"，需要手动parseInt或parseFloat - 如果属性未定义，返回空字符串
""，不是undefined，注意判空逻辑
如何用 style.setProperty 修改自定义属性？
修改目标必须是 DOM 元素的 style 对象（即内联样式），不是 CSS 文件或 <style> 块：
比如想改根元素上的全局变量，得操作 document.documentElement.style；想局部改某个按钮，就用 buttonEl.style。
- 语法固定：
el.style.setProperty('--bg-color', '#333') - 不能用点号赋值：
el.style.--bg-color = 'red'会报错 - 值必须是字符串，
setProperty('--opacity', 0.7)会被自动转成"0.7"，但建议显式转成字符串更可控 - 修改后，所有引用该变量的 CSS 规则会立即重绘，无需手动触发
为什么 :root 变量在子元素里读不到？
这不是 JS 问题，而是 CSS 继承规则：自定义属性默认不继承，但可以被子元素通过 var(--foo) 引用 —— 关键在于“引用”和“读取”是两回事。
用 getComputedStyle(child) 读 --foo，只有当该变量在 child 元素自身、其父级链上显式设置过（比如父元素写了 style="--foo: blue"），或者 :root 设置了且你传入的是 document.documentElement，才能读到。
- 查
:root的值，必须用getComputedStyle(document.documentElement).getPropertyValue('--foo') - 查某个子元素实际生效的值（考虑层叠和 var fallback），可传该元素进去，但前提是它自己或祖先设置了该变量
- 别指望
getComputedStyle(div).getPropertyValue('--missing')返回:root的值 —— 它不会向上查找
动态修改时要注意哪些性能和兼容性陷阱？
频繁调用 getComputedStyle 是强制同步布局（layout thrashing）的高危操作，尤其在动画循环里。
Chrome 和 Firefox 支持良好，IE 完全不支持；Safari 从 9.1 开始支持，但旧版 Safari 对 setProperty 在伪元素上的行为不稳定。
立即学习“Java免费学习笔记（深入）”；
- 批量读取时，先缓存
getComputedStyle(el)结果，再多次调用getPropertyValue，别反复调用 - 避免在
requestAnimationFrame中每帧都读+写同一变量，改用 CSStransition或will-change更高效 - 服务端渲染（SSR）场景下，
document不存在，读写前要加typeof document !== 'undefined'判断
