css自定义属性的var()函数在html的style属性中一定不生效，因为浏览器仅在或.css文件中解析var()，行内样式只接受静态值，整条声明会被静默丢弃。
CSS自定义属性（即 --xxx 变量）在 style 属性中写 var(--xxx) 一定不生效——这不是 bug，是浏览器明确不支持的语法限制。
为什么 style="color: var(--primary)" 完全没反应
浏览器解析 HTML 的 style 属性时，只接受静态 CSS 值（如 #007bff、16px），不执行任何函数计算。var() 是 CSS 层的运行时函数，仅在 <style></style> 标签或外部 .css 文件中由 CSS 引擎处理。一旦出现在 HTML 的 style 属性里，整条声明会被静默丢弃——开发者工具的 Styles 面板里根本不会显示它，Computed 面板里对应属性也维持初始值或继承值。
这不是转义问题，也不是命名大小写或拼写错误导致的；哪怕 --primary 在 :root 中正确定义、路径无误、没加空格，var(--primary) 在行内样式中依然无效。
怎么在 JS 控制下“用上” CSS 变量
必须绕过 var()，手动读取计算后的值，再写入 style：
-
getComputedStyle()返回的是字符串，且带前后空格，务必调用.trim() - 若变量定义在非
:root作用域（例如.theme-dark { --bg: #111 }），需传入对应元素节点，不能只用document.documentElement - 确保 CSS 文件已加载完成、变量已注册，再执行 JS；否则
getPropertyValue()返回空字符串
示例：
const primary = getComputedStyle(document.documentElement)
.getPropertyValue('--primary')
.trim();
element.style.color = primary;
哪些写法看似合理实则白忙
以下操作均无效，别试：
-
style="--primary: #007bff; color: var(--primary)"：前半句非法 token 被忽略，后半句因无定义失效 -
style="color: var(--primary, #007bff)"：fallback 不改变var()在行内不被解析的事实 - 把
--primary改成--Primary或加下划线/数字：命名规范对错不影响根本限制
真正容易被忽略的点是：CSS 自定义属性的设计目标是级联与动态响应，不是为内联样式服务的。当你频繁想往 style 里塞 var()，说明你可能正在用错抽象层——该用 JS 动态赋值的地方，硬套 CSS 变量逻辑，只会卡在浏览器解析阶段之外。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
