element.style.color = 'var(--text-primary)' 不起作用，因为 style 属性只接受已计算的最终颜色值，不解析 css 变量；必须通过 :root 定义变量、css 中用 var() 引用、js 调用 setproperty 动态更新。
不能直接用 element.style.color = 'var(--text-primary)'，浏览器会把它当字符串字面量处理，不会解析变量——必须靠 CSS 层级引用生效。
为什么 element.style.color = 'var(--text-primary)' 不起作用
CSS 变量不是 JS 字符串模板，element.style 只接受已计算的最终值（如 #3b82f6 或 rgb(59, 130, 246)）。写入 var(--x) 后，浏览器不会主动触发变量替换，color 属性就真变成了字面量 "var(--text-primary)"，渲染时无效。
- 开发者工具里能看到 computed style 的
color是invalid或空值 - 即使 :root 定义了
--text-primary，这个内联样式也完全不参与级联计算 - 同理，
element.style.backgroundColor = 'var(--bg-main)'一样失效
正确做法：让元素“继承”变量，再改 :root
颜色要动态响应，就得把变量声明和引用拆开：变量定义在 :root，元素样式用 var() 引用，JS 只负责更新根变量。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 确保 CSS 中写了类似
.title { color: var(--text-primary); }，而不是硬编码色值 - JS 改变量用
document.documentElement.style.setProperty('--text-primary', '#1e40af') - 别写成
document.body.style.setProperty(...)—— body 不是变量作用域根节点 - 如果元素没 class、只靠内联样式控制，可给它加个 wrapper class，再统一设
color: var(--text-primary)
特殊情况：必须用内联样式时怎么绕过
某些场景（比如富文本编辑器里用户粘贴的 <span style="color:red"></span>）无法改 class，只能操作 style。这时有两个务实方案：
- 把变量值提前算好：用
getComputedStyle(document.documentElement).getPropertyValue('--text-primary').trim()读出当前值，再赋给element.style.color - 用
element.setAttribute('style', 'color: var(--text-primary)')—— 注意这不是推荐做法，因为会覆盖已有内联样式，且部分旧版 Safari 对这种写法支持不稳定 - 更稳妥的是：避免在业务逻辑里依赖内联样式变色，统一走 class +
var()链路
容易被忽略的 fallback 和拼写细节
变量名大小写敏感、漏写前缀、没设默认值，都会导致静默失败。
-
--text-primary和--Text-Primary是两个不同变量 - 引用时务必带 fallback：
color: var(--text-primary, #374151)，否则变量未定义时文字直接透明 - JS 里调用
setProperty时传的字符串必须和 CSS 里声明的一致，包括连字符位置 - 读取变量值后记得
.trim()，否则空格会导致对比失败或 hex 转换出错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
