必须用 document.documentelement.style.setproperty 修改 css 变量，因其等价于 :root，是唯一全局生效入口；document.body 等非声明节点调用无效，仅写入内联样式且不冒泡。
直接改 document.documentElement.style.setProperty 就行，但必须确保变量已在 CSS 中用 :root 正确声明，且传入值带单位、带 -- 前缀——漏掉任一条件都会静默失败。
为什么 document.body.style.setProperty 不生效
CSS 变量的作用域是“声明即生效”，不是“任意元素都能覆盖”。你在 :root 里定义的 --primary-color，只属于 元素及其继承链；document.body 并未声明该变量，所以调用它的 style.setProperty 不会向上冒泡到 :root，只是往 元素的内联样式里塞了个无效属性。
常见错误现象：document.body.style.setProperty('--bg-color', '#222') 执行后页面无变化，控制台也无报错。
- ✅ 正确做法：始终用
document.documentElement.style.setProperty('--bg-color', '#222') - ⚠️ 注意：
document.documentElement等价于:root，是唯一能全局触发更新的入口 - ❌ 不要试图在
或其他非声明节点上调用setProperty来修改全局变量
var() 的默认值不是摆设，而是容错关键
当你通过 JS 动态设置变量时，可能因异步加载、条件分支或拼写错误导致某个变量未被赋值。此时若 CSS 中直接写 color: var(--text-color)，浏览器会按规范回退为 inherit 或初始值（比如 color 回退为 black），结果不可控。
使用默认值可兜底：
.title {
color: var(--text-color, #333);
background: var(--bg-color, #fff);
font-size: var(--font-size-lg, 1.25rem);
}
- 默认值支持任意合法 CSS 值，包括带单位的数字、颜色、甚至函数如
var(--shadow, 0 2px 4px rgba(0,0,0,0.1)) - 嵌套
var()不被支持（var(--a, var(--b))无效），需单层展开 - 调试时可在 DevTools 的 Computed 面板里看最终解析值，确认默认值是否被触发
局部变量与 JS 修改的配合边界
你可以在某个组件内部定义局部变量，比如 .card { --card-bg: #f9f9f9; }，但它无法被 document.documentElement.style.setProperty('--card-bg', ...) 修改——因为该变量不在 :root 作用域里。
如果需要 JS 控制局部样式，有两个可行路径：
- ✅ 给目标元素加 ref 或 class，用
element.style.setProperty('--card-bg', '#eef')直接操作该 DOM 节点（注意：必须是声明了该变量的节点） - ✅ 把局部变量“提升”为全局变量 + 类名开关，例如用
.card.dark { --card-bg: #222; }，再用 JS 切换 class - ❌ 不要指望一次
setProperty能跨作用域影响所有局部变量
最易被忽略的一点：CSS 变量的值是字符串，JS 设置时必须手动补单位（'16px' 而非 16）、手动转类型（'#ff6b6b' 而非 Color 对象），浏览器不会自动转换。任何格式偏差都会让 var() 解析失败，且不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
