本文讲解JavaScript变量与CSS自定义属性的本质区别，指出直接用JS变量名在HTML style属性中调用var(--xxx)是无效的，并演示如何通过:root定义CSS变量实现动态背景色控制。
本文讲解javascript变量与css自定义属性的本质区别，指出直接用js变量名在html style属性中调用`var(--xxx)`是无效的，并演示如何通过`:root`定义css变量实现动态背景色控制。
你在代码中尝试将 JavaScript 变量 bgcolor 直接用于 HTML 的内联样式中，写作 style="background-color: var(--bgcolor);"，这是无法生效的。原因在于：var(--xxx) 是 CSS 的语法，用于读取 CSS 自定义属性（即 CSS 变量），而 <script></script> 中声明的 var bgcolor = #ff0000 是 JavaScript 变量，它存在于 JS 执行环境，完全不被 CSS 解析器识别，二者作用域、语法和运行时机均不同，不可混用。
✅ 正确做法是使用纯 CSS 方式定义并引用自定义属性：
<head>
<style>
:root {
--bgcolor: #ff0000; /* 在根元素上定义 CSS 变量 */
}
</style>
</head>
<body style="background-color: var(--bgcolor);">
<!-- 页面内容 -->
</body>这样 var(--bgcolor) 才能被浏览器正确解析为 #ff0000，背景色生效。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- CSS 变量必须以
--开头（如--bgcolor），且需在 CSS 规则中定义（常用:root或某选择器内）； - JavaScript 中若需动态修改该颜色，应操作 CSS 变量本身，而非 JS 变量。例如：
document.documentElement.style.setProperty('--bgcolor', '#0066ff');这样可实时更新所有使用
var(--bgcolor)的样式； - 原代码中
var bgcolor = #ff0000缺少引号，会导致 JS 语法错误（#ff0000不是合法标识符），进一步说明 JS 与 CSS 的语法规则完全不同。
总结：要实现“根据输入动态改背景色”，推荐采用「CSS 自定义属性 + JavaScript 操作 style.setProperty()」组合方案——既保持样式逻辑清晰，又具备良好的可维护性与响应性。
