最直接方式是调用document.documentElement.style.setProperty()向:root注入带--前缀的字符串值，优先级高于外部CSS；局部变量需改对应元素style；读取时用getComputedStyle().getPropertyValue()并trim()，批量更新宜用Object.entries遍历。
直接操作 document.documentElement.style.setProperty
修改 CSS 变量最直接的方式是通过 document.documentElement.style.setProperty，它会向 :root 元素的内联样式中注入变量，优先级高于外部 CSS 文件中的定义。
注意：必须带 -- 前缀，且值要为字符串（即使数字也要加引号）。
document.documentElement.style.setProperty('--primary-color', '#3b82f6')- 若变量原定义在某个具体元素上（比如
.card），就改用该元素的element.style.setProperty - 不支持传入计算后的数值（如
1.2rem不能写成1.2 * parseFloat(getComputedStyle(...).fontSize)后直接塞进去——得自己算好再转字符串）
读取当前 CSS 变量值再更新（避免覆盖或误设）
有时需要基于现有值微调（比如把透明度从 0.8 改成 0.95），就得先读再写。直接读 getComputedStyle(document.documentElement).getPropertyValue('--opacity-level') 是安全的，但要注意返回值带空格或单位。
- 返回值可能含前导空格，建议用
.trim()清理：getComputedStyle(doc).getPropertyValue('--z-index').trim() - 如果变量未定义，
getPropertyValue返回空字符串，不是undefined，需做空值判断 - 不要依赖
CSSStyleDeclaration的cssText解析——它不包含继承来的变量值，也不反映计算结果
批量更新多个 CSS 变量时用 Object.entries 配合 setProperty
一次改十几个变量时，硬写十几行 setProperty 易出错且难维护。用对象字面量 + Object.entries 迭代更稳妥。
立即学习“Java免费学习笔记（深入）”；
const theme = {
'--bg-color': '#ffffff',
'--text-color': '#1f2937',
'--border-radius': '0.5rem'
};
Object.entries(theme).forEach(([key, value]) => {
document.documentElement.style.setProperty(key, value);
});注意：key 必须是完整变量名（含 --），value 必须是字符串；若 value 是 number 类型，会被自动转字符串，但像 0.5 会变成 "0.5"，而 0 会变成 "0"——多数情况没问题，但涉及单位时（如 px、rem）仍需手动拼接。
动态修改后样式未生效？检查这三点
常见“写了没反应”问题基本集中在这几个地方：
- CSS 变量名拼错，比如写成
'--primaryColor'而非'--primary-color'（CSS 中连字符是必需的分隔符） - 目标元素没用到该变量，或者用了但被更高优先级样式覆盖（比如某 class 里写了
color: red，那color: var(--text-color)就不会生效） - 在 Shadow DOM 内修改全局变量，但宿主元素没启用
inherit或all: inherit，导致子组件拿不到新值
变量本身不触发重排，但依赖它的属性（如 background-color）会重绘——这点在高频更新时要注意节流，别在 scroll 里无脑 setProperty。
