必须用document.documentElement.style.setProperty修改CSS变量，因其等价于:root，是唯一全局生效入口；改element.style.backgroundColor会覆盖变量导致更新失效。
直接改 element.style.backgroundColor 会覆盖 CSS 变量，导致后续变量更新失效——必须用 setProperty 更新作用域变量，再靠 var(--btn-bg) 触发级联重绘。
为什么 document.documentElement.style.setProperty 才有效
CSS 变量是级联计算的，不是内联样式。写在 :root 里的 --btn-bg 属于文档根作用域，只有改 document.documentElement.style 才能触发型重计算。如果误写成 button.style.setProperty('--btn-bg', ...)，变量只挂在这个按钮元素上，其他同级按钮完全不受影响。
-
document.documentElement对应:root，是唯一能全局广播变量变更的位置 - 别用
cssText = '--btn-bg: #xxx'，它会清空所有已有自定义属性 - 变量名必须带两个短横线前缀，
--btn-bg和--Btn-Bg是不同变量，大小写敏感
button:hover / :active 怎么复用同一个变量
不用给每个伪类单独定义变量，也不用 JS 在 mouseenter 里反复调用 setProperty。只要背景色声明用了 var(--btn-bg)，所有状态都会自动响应变量变化。
button { background-color: var(--btn-bg); }button:hover { background-color: var(--btn-bg); filter: brightness(1.15); }button:active { background-color: var(--btn-bg); filter: brightness(0.85); }- 禁用态建议用另一组变量，比如
background-color: var(--btn-bg-disabled)，避免靠 opacity 模糊文字可读性
读取变量值时 getComputedStyle 返回空字符串
常见原因是变量没在当前作用域定义，或拼写错误。 getComputedStyle(document.documentElement).getPropertyValue('--btn-bg') 返回空，不代表 JS 没执行成功，而是 CSS 里压根没声明这个变量。
立即学习“前端免费学习笔记（深入）”；
- 检查是否漏写
:root { --btn-bg: #007bff; }，不能只写 JS 修改却不声明初始值 - 返回值带前后空格，记得加
.trim()，否则对比失败 - 别用
document.documentElement.style.--btn-bg—— 这是语法错误，style对象只存内联样式，不存 CSS 变量 - 移动端 Safari 老版本可能延迟渲染，可在
touchstart后用setTimeout(() => {}, 0)推到微任务队列
深色模式下按钮颜色跳变怎么办
硬编码十六进制色值（如 #4a90e2）会让亮/暗模式切换时颜色突兀，因为人眼对不同背景下的同一 RGB 值感知差异极大。用 HSL 拆解后只调 --primary-l 才稳定。
- 定义
:root { --primary-h: 210; --primary-s: 65%; --primary-l: 57%; } - 按钮用
background: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); - 深色模式只需改
--primary-l到35%，色相和饱和度不变，视觉连贯 - 确保
--primary-s定义时不带引号：--primary-s: 65%;✅，不是--primary-s: "65%";❌
最易被忽略的是：变量修改后，按钮样式必须真正依赖 var(--x)，且不能被 !important 或更高优先级的选择器覆盖；否则 setProperty 成功了，但浏览器根本不用它。
