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 style100 次调用 ≈ 100 次潜在 layout thrashing。尤其在 scroll 或 resize 回调里性能掉得非常明显。 VWO 一个A/B测试工具