修改 document.documentElement.style 是最常用方式，需用 setProperty() 而非直接赋值，注意单位、空值处理及类型转换，避免性能陷阱与兼容性问题。
直接修改 document.documentElement.style 是最常用方式
全局 CSS 变量（:root 下定义的 --xxx）本质是级联到根元素的自定义属性，修改 document.documentElement.style 会立即触发重绘，且优先级高于样式表中的声明。
实操时注意：必须用 setProperty()，不能直接赋值给 style 对象属性（比如 style['--color'] = 'red' 不生效）。
-
document.documentElement.style.setProperty('--primary-color', '#3b82f6')—— 正确 -
document.documentElement.style['--primary-color'] = '#3b82f6'—— 无效 - 批量更新建议用循环或
Object.entries()，避免重复访问 DOM - 若变量值含单位（如
px、rem），务必保留；空字符串或undefined会导致变量回退到继承值或初始值
用 CSSStyleSheet.insertRule 动态注入 :root 规则有兼容性风险
这种方式本质是向 <style> 标签插入新规则，理论上能覆盖旧定义，但实际中容易因顺序、作用域或浏览器解析差异导致不可靠。
常见错误现象：insertRule(':root { --bg: #000; }', 0) 插入后变量未更新，或在 Safari 中完全不生效。
立即学习“Java免费学习笔记（深入）”；
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 仅适用于需要“永久写入样式表”的极少数场景（如主题预编译）
- 必须确保目标
CSSStyleSheet可写（disabled === false，且非内联<style>的只读 sheet） - Chrome 和 Firefox 支持较好，Safari 对
insertRule操作:root的行为不一致 - 无法优雅回滚——删 rule 需要精确匹配索引，容易出错
封装批量更新函数时，要处理 null/undefined 值和类型转换
从配置对象或 API 响应中读取变量值时，常遇到 null、undefined 或数字类型，直接传给 setProperty() 会导致变量失效或报错。
例如：setProperty('--opacity', 0.8) 会变成字符串 "0.8"，虽可工作，但 setProperty('--z-index', 999) 更推荐显式转成字符串，避免意外类型推导。
- 安全写法：
String(value)或模板字面量${value} -
null和undefined应显式过滤或替换为默认值（如空字符串''表示“清除该变量”） - 若需支持 CSS 函数（如
var(--color), linear-gradient(...)），确保传入的是完整字符串，不要额外加引号 - 避免在循环中反复调用
getComputedStyle(document.documentElement)，它会强制同步布局计算，影响性能
更新后如何验证变量是否生效？别只查 computedStyle
getComputedStyle(document.documentElement).getPropertyValue('--my-var') 返回的是最终计算值，但可能来自继承、回退值或浏览器默认，不代表你刚设的值被采纳了。
真正可靠的验证方式是：找一个已应用该变量的真实元素，检查其最终样式；或用 matchMedia + 强制重排间接触发验证逻辑。
- 推荐做法：在更新后立即读取
document.documentElement.style.getPropertyValue('--my-var')—— 这里返回的是你最近一次setProperty()设置的原始值 - 如果返回空字符串，说明设置失败（可能是拼写错误、CSS 语法非法，或该变量根本没在
:root中声明过） - 浏览器 DevTools 的
Computed面板里搜索变量名，看“来源”是否标记为element.style，这是最直观确认方式
