内联样式（style属性）不支持var()函数调用，这是浏览器原生限制；必须通过JS用getComputedStyle().getPropertyValue()读取变量值并手动赋给style属性，或改用class切换配合CSS变量级联。
内联样式里用var()为什么完全没反应
因为内联样式（style属性）不支持var()函数调用——这是浏览器原生限制，不是你写错了。HTML元素的style属性只接受静态值，解析器在解析它时根本不会执行CSS变量替换逻辑。
常见错误现象：你在div style="color: var(--primary);"里写了var()，但开发者工具的Computed面板显示color是inherit或初始值，Styles面板里也压根不显示这条声明。
- 哪怕
:root里正确定义了--primary，且路径、加载、拼写全对，var()在style属性中依然被直接忽略 - 部分旧版Chrome曾短暂支持过（v62–64），但已被移除；当前所有主流浏览器（Chrome 120+、Firefox 115+、Safari 17+）均不支持
- 不要尝试用
style="color: var(--x, #000)"加回退值来“蒙混过关”，一样无效
style属性里想用变量，只能间接处理
必须把变量值“提前计算好”，再塞进style属性。没有捷径，只有两种可靠方式：
- 服务端渲染时，读取CSS变量值（如通过CSSOM或预设配置），拼成字符串注入
style - 客户端JS运行时，用
getComputedStyle(document.documentElement).getPropertyValue('--primary')拿到值，再赋给element.style.color - 注意：
getPropertyValue()返回的是带空格的字符串（如" #007bff "），建议用.trim()清理
示例（JS动态设置）：
立即学习“前端免费学习笔记（深入）”；
const primary = getComputedStyle(document.documentElement)
.getPropertyValue('--primary')
.trim();
document.querySelector('.btn').style.color = primary;
别把var()和CSS自定义属性混为一谈
很多人误以为“既然:root { --color: red }定义了变量，那style="--color: red"也能生效”——这完全错误。style属性只认标准CSS属性名（如color、margin），--color这种自定义属性名在style里属于非法token，浏览器会静默丢弃整条声明。
- 错误写法：
<div style="--primary: #007bff; color: var(--primary)"> → <code>--primary被忽略，var()找不到定义，color失效 - 正确思路：变量定义和使用必须都在CSS层（
<style></style>或外部.css文件），style属性只负责传递最终计算结果 - 如果项目重度依赖动态主题，建议放弃内联样式，改用
class切换 + CSS变量级联，这才是设计本意 -
getComputedStyle()在Shadow DOM中需传入对应shadowRoot.host，否则读不到宿主定义的变量 - 若变量定义在非
:root作用域（如.theme-dark { --bg: #111 }），getComputedStyle必须传入该元素本身，不能只查document.documentElement - IE11及更早版本不支持
var()，也不支持getComputedStyle().getPropertyValue()读取自定义属性——这类环境必须降级为硬编码或CSS类切换
容易被忽略的兼容性细节
即使你绕过了style属性，用JS读取var()值，也要注意几个隐蔽坑点：
最稳妥的做法，是把变量逻辑收口到一个JS模块里统一管理，避免散落在各处的getPropertyValue调用，也方便未来迁移到CSS Houdini或@property声明。
