JS 修改 CSS 变量需调用 document.documentElement.style.setProperty('--var', 'val') 更新 :root 作用域，而非直接改元素 style；变量被 var() 引用且未被内联样式覆盖时，浏览器自动重绘。
用 :root 声明 CSS 变量后，JS 修改时颜色不更新？
不是变量没生效，而是你可能直接改了元素的 style.backgroundColor，覆盖了 CSS 变量的级联效果。CSS 变量要靠 setProperty 更新到作用域上，再让样式重新计算。
- 必须在
:root或目标选择器上设置变量，例如：:root { --btn-bg: #007bff; } - JS 中用
document.documentElement.style.setProperty('--btn-bg', '#28a745')，不是element.style.setProperty - 如果按钮用了
background-color: var(--btn-bg)，变量更新后会立刻重绘，无需强制触发 reflow - 注意大小写敏感：变量名
--Btn-Bg和--btn-bg是两个不同变量
按钮有多个状态（hover/active/disabled），怎么统一用变量控制？
别给每个伪类单独写变量，容易失控。一个变量 + 级联优先级就够了。
- 基础色用
--btn-bg，hover 用var(--btn-bg)，再叠加filter: brightness(1.1)或opacity更轻量 - disabled 状态建议用
color: var(--btn-text-disabled); background-color: var(--btn-bg-disabled)，而不是靠 JS 切换 class 控制所有样式 - 避免在
:hover里再写setProperty—— JS 改变量一次，所有状态自动响应 - 如果需要深浅两套主题，用
data-theme="dark"切换:root[data-theme="dark"]下的变量值，比维护多组 class 更可靠
getComputedStyle 读不到变量值？
能读到，但得用 getPropertyValue，不是直接访问 style 对象。
- 正确写法：
const root = document.documentElement;<br>const color = getComputedStyle(root).getPropertyValue('--btn-bg').trim(); - 返回值带空格或引号（比如
"#007bff "），记得trim() - 如果读出来是空字符串，说明变量未在
:root或当前计算样式作用域中定义，检查是否拼错变量名或漏写-- - 不要用
root.style.--btn-bg—— 这是无效语法，style对象只存内联样式，不存 CSS 变量
移动端 Safari 上变量更新有延迟或失效？
老版本 iOS Safari（
立即学习“前端免费学习笔记（深入）”；
- 确保变量修改后，按钮的
background-color确实依赖var(--btn-bg)，而不是被其他规则（比如!important）覆盖 - 避免在
touchstart中立刻改变量，Safari 可能合并渲染帧；可加setTimeout(() => {}, 0)微任务延后 - 真机调试时用
console.log(getComputedStyle(btn).backgroundColor)验证最终计算值，比肉眼判断更准 - 如果涉及动画（比如渐变背景），CSS 变量本身不能被 transition，要用
background-color直接过渡，变量只负责提供起止值
