最可靠方式是逐节点调用element.style.setproperty()，因css变量作用域由声明位置决定，全局设置无法覆盖已显式声明同名变量的子节点；需精准选择目标节点、带--前缀、避免高频调用，并注意ie兼容性与ssr fallback。
直接修改 style.setProperty 是最可靠方式
浏览器对 CSS 变量（--my-var）的批量更新，不能靠改 class 或重写 style.cssText 来间接触发——前者需预设好对应规则，后者会清空已有内联样式。唯一可控、可编程的方式是遍历目标节点，对每个节点调用 element.style.setProperty('--var-name', 'value')。
常见错误是试图用 document.documentElement.style.setProperty 一次性设置全局变量，但这只影响 :root 下生效的节点，对已通过 JS 显式设置过同名变量的子节点无效（层叠优先级更高）。
- 必须逐节点操作，无法“广播式”更新
- 若节点已被 JS 设置过该变量，新值会立即生效；若未设置过，该调用会新增一条内联声明
- 注意变量名要带
--前缀，比如setProperty('--color-primary', '#3b82f6')
用 querySelectorAll 精准定位目标节点
批量更新的前提是准确选出要改的节点。别依赖模糊的 getElementsByTagName 或遍历全部 div——性能差且易误伤。优先用语义化、带明确作用域的 class 或 data 属性：
const targets = document.querySelectorAll('[data-theme-target]'); // 推荐：语义清晰
// 或
const targets = document.querySelectorAll('.js-update-css-var'); // 可维护性强
// 避免：
// const targets = document.querySelectorAll('div'); // 太宽泛
如果目标节点嵌套深或动态生成，记得在 DOM ready 后执行，或用 MutationObserver 监听新增节点并补上变量设置。
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 选择器越具体越好，避免匹配到无关元素
- 不要在循环里反复调用
querySelectorAll，提前存结果 - 若节点可能被移除，遍历时建议用
Array.from(targets)转成数组，防止 live NodeList 动态变化引发跳过
批量更新时注意性能与触发时机
一次更新几十个节点基本无感，但上百个以上就得防卡顿。关键不是“能不能做”，而是“什么时候做”和“要不要合并”：
- 避免在
scroll或input高频事件中直接调用 —— 加requestAnimationFrame缓冲：requestAnimationFrame(() => { /* 更新逻辑 */ }) - 如果只是切换主题色，考虑把多个变量打包进一个
CSSStyleDeclaration操作，减少重排重绘次数（但本质仍是逐节点 setProperty） - 不要用
innerHTML或outerHTML替代 —— 会销毁事件监听器、表单状态、焦点等，副作用远大于收益
示例节选：
const vars = { '--bg': '#1e293b', '--text': '#f1f5f9' };
Array.from(document.querySelectorAll('[data-theme]')).forEach(el => {
Object.entries(vars).forEach(([prop, val]) => el.style.setProperty(prop, val));
});
兼容性与 fallback 处理不能省
IE 完全不支持 CSS 变量，style.setProperty 在 IE 中存在但无效。如果你仍需支持 IE，必须同步写 fallback 值（如 color: #3b82f6），且不能依赖变量计算：
- 现代浏览器中，
el.style.color = 'var(--text)'是合法的，但 IE 会把它当字符串字面量，渲染为文字 “var(--text)” - 服务端渲染或 SSR 场景下，首次 HTML 输出应含 fallback 值，JS 再覆盖为变量 —— 否则首屏闪白或错色
- 用
CSS.supports('color', 'var(--x)')判断支持度，再决定是否走变量路径
真正麻烦的不是语法，而是变量作用域链和继承行为——父节点设了 --size，子节点又设了同名变量，你批量更新父节点时，子节点不会自动响应，除非你显式也更新它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
