最简单可靠的方式是操作 document.documentElement.style：用 setProperty 设置带前缀的变量，注意单位、避免高频调用；读取需 requestAnimationFrame 延迟；批量更新优先用 cssText 或 style 标签；SSR 需 HTML 预设默认值并用 @supports 降级。
直接改 document.documentElement 的 style 就行
想让整个页面响应式更新 CSS 变量，最简单也最可靠的方式就是操作根元素的内联样式。CSS 变量（--xxx）本质是自定义属性，必须挂载在某个 DOM 节点的 style 对象上才能被继承和生效，而 document.documentElement（即 <html> 元素）是全局作用域的默认宿主。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 用
document.documentElement.style.setProperty('--color-primary', '#3b82f6')设置变量值，不要漏掉双破折号前缀 - 如果变量值含单位（如
px、rem），必须显式写上，setProperty不会自动补 - 设置空字符串或
undefined不会删除变量，只会设为无效值；真要“清除”，得用removeProperty - 避免在循环中高频调用——每次调用都会触发样式重计算，有性能风险
为什么 getComputedStyle 读不到刚设的变量值
这是新手最常卡住的地方：刚用 setProperty 改完，立刻 getComputedStyle(document.documentElement).getPropertyValue('--color-primary') 却返回空字符串。不是代码错了，而是 CSSOM 更新有延迟——setProperty 是同步写入 style 对象，但浏览器需等到下一次样式计算周期才真正解析变量依赖链。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 读取变量值时，别依赖“刚写完就立刻读”，尤其不要用于条件判断逻辑
- 真需要确认是否生效，可用
requestAnimationFrame延后一帧再读：element.style.setProperty('--size', '16px');<br>requestAnimationFrame(() => {<br> console.log(getComputedStyle(element).getPropertyValue('--size')); // ✅ 此时大概率已更新<br>}); - 调试时优先看浏览器开发者工具的 “Computed” 面板，它反映的是最终计算结果，比 JS 读取更准
批量更新多个变量时，别一个个 setProperty
连续调用多次 setProperty 会触发多次样式重排（layout）或重绘（paint），尤其在动画场景下容易掉帧。更优解是把所有变量先拼成一个 CSS 字符串，一次性注入 style.cssText，或者用 CSSStyleSheet.insertRule 动态插入规则块。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 对根元素批量更新，推荐用
cssText替代多次setProperty：const root = document.documentElement;<br>root.style.cssText += `--color-bg: #f9fafb; --border-radius: 8px; --shadow: 0 2px 4px rgba(0,0,0,0.1);`;
- 注意
cssText是覆盖写入，不是追加——如果已有其他内联样式，得先保留再拼接，否则会丢失 - 若需动态增删整套主题规则（比如亮色/暗色切换），更适合用
<style id="theme-style">标签 +textContent替换，语义更清晰、可维护性更高
兼容性与 SSR 场景下的 fallback 处理
CSS 变量本身不支持 IE，但即使在现代浏览器中，服务端渲染（SSR）或静态生成（如 Next.js、Nuxt）首次 HTML 输出时，JavaScript 还没执行，setProperty 完全没机会运行——此时变量值为空，样式会断层。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 关键变量（如主题色、字号）务必在 HTML 模板里预设默认值：
<html style="--color-primary: #6366f1; --font-size-base: 16px;">
- 用
@supports (--color-primary: #000)包裹依赖变量的 CSS 规则，给不支持的环境提供降级样式 - SSR 框架中，避免在组件
useEffect或mounted中才首次设变量——应提前在getInitialProps或setup阶段注入初始值到 HTML
变量本身不难设，难的是确保它在任何时机、任何上下文里都稳定参与样式计算。别只盯着 setProperty 这一行代码，得把它放进整个样式生命周期里看。
