不能直接用 style 属性设置并立即使用 css 自定义属性，因变量声明与 var() 引用在同一内联样式中不同步；需通过父级样式、js setproperty() 或 class 封装配合实现。
不能直接用 style 属性设置 CSS 自定义属性（即 CSS 变量）的值，但可以间接实现——关键在于理解浏览器解析内联样式的时机和作用域限制。
为什么 style="--color: red" 看似无效？
它其实有效，但常被误判为“无效”，因为：
- CSS 变量必须在使用它的选择器作用域内声明（包括祖先元素），style 中声明的变量只对当前元素及其后代生效；
- 如果你在该元素上没写任何用到 --color 的 CSS 规则（比如 color: var(--color)），就看不到效果；
- 浏览器不会报错，也不会警告，导致你以为写错了。
style 里声明变量 + 同元素内联使用 var() 不行
这是最典型的误区：下面写法不起作用：
div style="--bg: blue; background-color: var(--bg);"
原因：浏览器解析 style 属性时，是按分号分割后逐条解析的，var(--bg) 引用发生在样式计算阶段，而此时 --bg 还未完成注册（同一 style 字符串中变量声明和引用不能“即时生效”）。
可行方案是：
- 把变量声明放在父级或同级 <style></style> 块中；
- 或用 JS 动态设置再读取；
- 或拆成两步：先设变量，再通过 class 或后续样式规则消费它。
JS 配合内联样式动态传值最可靠
真正可控、可调试的方式是用 JavaScript 操作 style 属性：
-
element.style.setProperty('--size', '16px')—— 安全设置，支持任意变量名 -
element.style.setProperty('background-color', 'var(--size)')不推荐，因为内联样式不支持var()解析（同上一条） - 正确做法：用 CSS 类封装
var()使用逻辑，仅用 JS 控制变量值
例如：
.box { width: var(--w); height: var(--h); }
<div class="box" style="--w: 200px; --h: 100px"></div>
这样既保持结构清晰，又避免 JS 直接操作 layout 属性。
服务端渲染或模板中拼接变量要防 XSS
如果通过模板（如 Vue/React SSR、PHP 输出）生成带变量的 style，注意：
- --color: <user-input></user-input> 必须严格校验或转义，否则可能注入恶意 CSS（如 ); @import "x.css"）；
- 推荐白名单过滤：只允许数字、单位（px/rem）、颜色关键字、十六进制色值；
- 避免把用户输入直接插进 style 字符串，优先走 CSS-in-JS 或 data attribute + JS 绑定。
变量传值本身不复杂，难的是作用域边界和执行时序——多数问题出在“以为设了就能用”，其实得看谁在什么时候读它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
