CSS变量必须用element.style.setProperty()设置，参数为带--前缀的字符串名和字符串值；作用域由声明位置决定，局部内联样式优先级高于:root；调试用getComputedStyle().getPropertyValue()读取、removeProperty()清除；批量设置需注意依赖顺序。
直接用 element.style.setProperty() 修改 CSS 变量
CSS 自定义属性（即 CSS 变量）必须通过 setProperty() 设置，不能用 element.style.变量名 = xxx 这种方式赋值——后者只对原生 CSS 属性有效，对 --xxx 开头的自定义属性完全无效。
调用时注意两点：第一个参数是带两个短横线的完整变量名（如 --bg-color），第二个参数是字符串值（即使数值也要转成字符串）：
const root = document.documentElement;
root.style.setProperty('--bg-color', '#4a90e2');
常见错误包括传入数字不转字符串、漏掉 -- 前缀、误写成驼峰（如 bgColor）——这些都会静默失败，浏览器不会报错，但样式不变。
修改的是作用域内的变量，不是全局覆盖
CSS 变量的作用域由声明位置决定。在 :root 中声明的变量全局可用，但若在某个 class 或元素上用 style="--color: red" 声明了同名变量，那 document.documentElement.style.setProperty() 就无法影响它——因为该元素上的内联变量优先级更高。
立即学习“前端免费学习笔记（深入）”；
所以实际操作前先确认目标作用域：
- 想改全站主题色 → 用
document.documentElement - 只改某个组件 → 获取对应
element再调用element.style.setProperty() - 动态切换暗色模式时，别只改
:root，还要检查是否有局部style覆盖了变量
getPropertyValue() 和 removeProperty() 配合调试
调试时经常需要读取当前生效的变量值，或临时清除某变量回退到上级定义。这时要用 getComputedStyle(element).getPropertyValue('--var-name') 读取计算后的值（注意：必须用 getComputedStyle，element.style.getPropertyValue() 只读内联样式）。
清除变量则用 element.style.removeProperty('--var-name')，它等价于把该变量从内联样式中删掉，让浏览器重新向上查找继承值。
示例：
const el = document.querySelector('.card');
console.log(getComputedStyle(el).getPropertyValue('--border-radius')); // '8px'
el.style.removeProperty('--border-radius'); // 恢复为 :root 定义的值
批量更新多个变量时，避免反复触发重排
连续调用多次 setProperty() 会触发多次样式计算，尤其在循环里设置几十个变量时性能明显下降。更优做法是先把所有变量写进一个对象，再统一注入 style 字符串，或用 CSSStyleSheet.insertRule() 动态插入规则块。
简单稳妥的批量写法是：
const theme = {
'--primary': '#3498db',
'--shadow': '0 2px 6px rgba(0,0,0,0.1)',
'--radius': '6px'
};
Object.entries(theme).forEach(([k, v]) => {
document.documentElement.style.setProperty(k, v);
});
但要注意：如果变量之间有依赖（比如 --hover-bg 基于 --primary 计算），务必保证设置顺序，否则可能取到旧值。
真正容易被忽略的是：CSS 变量的值在 JS 中只是字符串，不支持表达式或计算，所有逻辑必须在 JS 层完成后再塞进去。
