document.documentElement.style.setProperty()可精准设置CSS变量，需确保变量定义在:root或有效作用域内，参数为字符串格式的'--name'和值（如'#3b82f6'），不支持priority且须检查计算样式是否生效。
直接用 document.documentElement.style.setProperty() 就能改 CSS 变量，但必须确认变量定义在 :root 或当前生效的样式作用域里，否则设了也白设。
为什么 document.documentElement.style 是首选目标
因为 CSS 变量（--xxx）通常定义在 :root 选择器下，而 document.documentElement 对应的就是 <html> 元素，它的 style 属性正是内联样式层，优先级高于外部样式表中的同名变量声明。
- 不要用
document.body.style.setProperty()——body上设的变量对其他元素不可见（除非显式继承或重定义） - 避免误写成
element.style.--my-var = 'val'—— 这是语法错误，JS 不允许属性名含连字符且以两个短横开头 - 如果变量定义在
.theme-dark { --color: #222 }里，但document.documentElement没加class="theme-dark"，那setProperty()设的值不会触发计算样式更新
setProperty() 的三个参数怎么填才有效
setProperty() 的签名是 setProperty(propertyname, value, priority)，对 CSS 变量来说，第三个参数几乎总是不用填。
-
propertyname必须是字符串，如'--primary-color'，注意大小写和连字符要和 CSS 里完全一致（--COLOR≠--color） -
value是字符串，哪怕设数字也要带单位或引号，比如'20px'、'#fff'、'bold' -
priority填'important'对 CSS 变量无效 —— 它只影响普通 CSS 属性（如color），变量本身没有优先级概念
设完没反应？先检查 computed style 里有没有这个变量
调用 setProperty() 成功不代表页面立刻变样，常见原因是变量根本没进计算样式树。
立即学习“前端免费学习笔记（深入）”；
- 执行
console.log(getComputedStyle(document.documentElement))，展开看输出对象里是否存在对应 key（比如--accent） - 如果返回空字符串
''，大概率是 CSS 里压根没定义该变量，或定义在未激活的选择器中（比如.light-mode但当前 class 是dark-mode） - 变量名拼错、多空格、用了中文短横（—）、或混用了下划线和短横（
--bg_colorvs--bg-color）都会导致读不到、设不进
动画过渡不了 CSS 变量？得靠 @property 注册
直接写 transition: --primary-color 0.3s 是无效的，浏览器默认不识别自定义变量为可过渡属性。
- Chrome 110+ 支持
@property，需提前注册：@property --primary-color { syntax: '<color>'; inherits: false; initial-value: #007bff; } - 没注册时，想实现颜色渐变只能靠 JS 手动插值 + 频繁
setProperty()，或者退回到 class 切换 + CSS 过渡普通属性 -
setProperty()本身是同步的，但样式重排（reflow）和重绘（repaint）由浏览器调度，高频调用（如 mousemove 中）建议节流
最常被忽略的一点：CSS 变量修改后，依赖它的 var(--x) 会自动更新，但前提是那个 var() 真正被用在某个元素的计算样式里 —— 如果只是写在 CSS 里但没被任何元素引用，改了也看不到效果。
