必须用document.documentElement.style.setProperty()修改CSS全局变量，因仅操作:root（即html元素）才能使变量透传至整个文档树；变量名须带--前缀、值须为字符串，否则静默失败。
直接用 document.documentElement.style.setProperty 就行
修改 CSS 自定义属性（即 CSS3 全局变量）最直接、最高效的方式，就是操作根元素的 style 对象。浏览器对 setProperty 的实现已高度优化，只要不频繁触发重排/重绘，性能完全可靠。
注意：必须作用于 :root 对应的 DOM 节点，也就是 document.documentElement（不是 document.body），否则变量不会全局生效。
-
document.documentElement.style.setProperty('--primary-color', '#3b82f6')立即生效，所有引用该变量的元素样式自动更新 - 变量名必须带双短横线前缀（
--），拼写错误或漏掉会静默失败 - 值必须是合法 CSS 值字符串，比如
'20px'、'rgba(0, 0, 0, 0.7)'，不能传数字或对象
批量设置多个变量时别链式调用 setProperty
连续多次调用 setProperty 不会合并为一次样式计算，但也不会明显卡顿；真正影响性能的是每次调用后可能触发的样式重新计算和布局。如果要设 5 个以上变量，更稳妥的做法是先拼成一个内联 style 字符串再一次性赋值。
- ❌ 避免：
el.style.setProperty('--a', '1'); el.style.setProperty('--b', '2'); ...（共 10 次） - ✅ 推荐：
el.style.cssText += '; --a: 1; --b: 2; --c: 3;'（注意分号分隔，且保留原有 cssText 内容） - ⚠️ 注意：
cssText会覆盖已有内联样式，若需保留原 style 属性，得先读取再拼接
动态值依赖 JS 计算？记得做类型和单位校验
从 JS 变量生成 CSS 值时，最容易出错的是单位缺失或类型不匹配。比如把 fontSize: 16 直接塞进去，浏览器当无效值忽略；又或者把布尔值 true 当字符串传入，变成 --flag: "true"，CSS 里根本没法用。
- 数值类变量（如
--gap、--z-index）必须手动补单位，px、rem、无单位等按需加 - 颜色类建议统一用
rgb()或hsl()字符串，避免Color对象或数组直接 toString() - 布尔逻辑可转为
0 / 1或none / block等 CSS 可识别关键字，别留true/false
修改后样式没更新？先查这三处
不是代码没执行，而是变量没被正确消费。常见断点位置很固定：
- CSS 中变量使用写成了
color: var(--primary-color)，但漏了默认值，而变量本身未声明 → 浏览器用 inherit 回退，看起来像没变 - 变量在
@media或@supports块里定义，而 JS 设置的是全局:root，优先级被覆盖 - 目标元素的 CSS 选择器权重太高，直接写了
color: #000，把var(--x)给盖掉了
调试时打开 DevTools 的 Computed 面板，搜变量名，看是否显示“var(--x) = #xxx”，再点开右侧实际生效的值来源——这才是真实瓶颈所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
