JS读取CSS自定义变量需确保变量已作用于目标元素（如:root或元素自身），再用getComputedStyle(el).getPropertyValue('--var')获取，注意双短横、返回字符串、空字符串非undefined；动态修改用setProperty仅限当前元素，IE不支持，需兼容处理。
怎么在JS里读取CSS自定义变量的实时值
不能直接用 getComputedStyle 读取未在元素上显式设置的变量值——它只返回计算后的结果，且对未生效的 --foo 返回空字符串或默认值。必须确保变量已作用于目标元素（比如写在 :root 或该元素自身），再通过 getComputedStyle(el).getPropertyValue('--color') 获取。
- 注意前后空格：
getPropertyValue('--color')要带两个短横，不能写成getPropertyValue('color')或getPropertyValue('--color ') - 返回值总是字符串，哪怕你设的是数字：
--size: 16→getPropertyValue('--size')得到"16"，不是16 - 如果变量没被继承或没在该元素上计算，会返回空字符串
""，不是undefined，别用== null判空
用 setProperty 动态改 CSS 变量时的兼容性陷阱
element.style.setProperty('--theme', 'dark') 看似简单，但它的作用域仅限于该元素的 style 属性，不会影响子元素，除非子元素显式继承（比如 color: var(--theme)）或你手动遍历设置。更关键的是：IE 完全不支持 setProperty 和自定义变量，所有现代浏览器都支持，但 Node.js 环境（如 JSDOM 测试）可能返回空或抛错。
- 别在
:root上乱调document.documentElement.style.setProperty—— 它确实能改全局变量，但若页面有多个 CSS 文件用@import或动态插入，顺序可能导致覆盖失效 - 改完后，依赖该变量的 CSS 不会“重绘回调”，DOM 不会触发
transition，除非变量参与了可动画属性（如background-color）且原生支持 - 移动端 Safari 13.4+ 才稳定支持
setProperty修改后立即响应，旧版可能需要强制重排（el.offsetHeight）触发刷新
如何安全地 fallback 到 JS 控制样式
当 CSS 变量不可用（比如降级到 IE 或 SSR 渲染阶段），别硬塞 var(--x, red) 然后指望 JS 补救——var() 的 fallback 是 CSS 层的，JS 拿不到。得在 JS 里自己做判断。
- 先尝试读变量：
const val = getComputedStyle(el).getPropertyValue('--bg'); - 再检查是否有效：
if (!val.trim()) { /* 退到 data-* 属性或硬编码值 */ } - 避免重复设置：用
Map缓存已设置过的变量名和目标元素，防止高频调用setProperty导致样式抖动
为什么不要在循环里反复 setProperty
每调一次 setProperty 都可能触发样式重新计算（recalculate style），100 次调用 ≈ 100 次潜在 layout thrashing。尤其在 scroll 或 resize 回调里，性能掉得非常明显。
立即学习“前端免费学习笔记（深入）”；
- 合并操作：把多个变量收集进一个对象，一次性遍历设置：
Object.entries(vars).forEach(([k, v]) => el.style.setProperty(k, v)) - 用
CSSStyleSheet.insertRule替代批量修改（适合全局变量），但要注意动态插入规则的优先级和维护成本 - 真要高频更新？考虑用
requestAnimationFrame节流，或者直接操作transform/opacity这类合成层属性，绕过 CSS 变量
实际项目里最常出问题的，是以为 setProperty 改了就能立刻被所有子组件感知——其实它只改变当前节点的样式作用域，而子组件是否响应，完全取决于它们自己的 CSS 是否写了 var(--x) 并正确继承。这个链路断一环，JS 就白忙活了。
