内联样式不支持 var() 是浏览器原生限制，因其不进入 css 变量解析流程；必须用 javascript 调用 getcomputedstyle().getpropertyvalue() 获取变量值并手动赋值，且需注意作用域、空格和执行时机。
内联样式（style 属性）里写 var(--x) 就不会生效，这不是 bug，是浏览器明确不支持——它压根不进 CSS 变量解析流程。
内联样式不支持 var() 是浏览器原生限制
HTML 的 style 属性只接受静态值，比如 color: #007bff 或 margin: 10px。当你写 style="color: var(--primary)"，浏览器在解析这个字符串时，根本不会调用 CSS 变量替换机制。整条声明会被静默丢弃，DevTools 的 Styles 面板里都看不到它，Computed 里也找不到来源。
这不是拼写错误、没加 :root、路径不对或 HTML 转义的问题——哪怕变量定义完全正确，var() 在 style 里就是无效语法。
- Chrome 62–64 曾实验性支持，但早已移除
- 当前所有主流浏览器（Chrome 120+、Firefox 115+、Safari 17+）均不支持
-
style="--primary: red; color: var(--primary)"这种写法同样无效：前半句非法 token 被忽略，后半句因无定义而失效
想动态用 CSS 变量，必须靠 JS 提前读取再赋值
唯一可靠路径是绕过 var()，用 JS 把变量值“算出来”，再塞进 element.style。
核心方法是：getComputedStyle().getPropertyValue()，注意作用域和清理空格：
- 变量定义在
:root→ 传document.documentElement - 变量定义在某个 class（如
.theme-dark { --bg: #111 }）→ 传对应元素节点，不能传document.documentElement -
getPropertyValue('--primary')返回带前后空格的字符串（如" #007bff "），务必接.trim() - 确保执行时机：CSS 已加载完成、变量已定义，否则返回空字符串
示例：
const primary = getComputedStyle(document.documentElement)
.getPropertyValue('--primary')
.trim();
element.style.color = primary;
为什么不用内联样式 + CSS 变量？这是架构信号
频繁往 style 里塞 var()，往往说明你正试图用错工具解决主题切换问题。CSS 变量的设计本意是级联（cascade）与响应式（比如配合 prefers-color-scheme 或 class 切换），不是为逐个元素硬编码值服务的。
真正可维护的做法是：
- 用 class 控制主题（如
） - 把变量定义在对应 class 下（
.theme-dark { --bg: #111 }） - 样式规则统一写在 CSS 文件里，靠级联自动生效
一旦你开始写一堆 el.style.color = getPropertyValue(...)，就得问自己：是不是该重构主题系统了？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
