我在HTML文档中正确使用JS变量了吗？请帮忙检查代码正确性

原代码的问题 #

• JS变量bgcolor的颜色值未加引号，JS中字符串必须用引号包裹，正确写法是var bgcolor = "#ff0000"
• CSS的var(--bgcolor)调用的是CSS自定义属性，但你在JS里定义的是普通JS变量，两者不属于同一体系，CSS无法识别这个变量

修复方案 #

方案1：直接通过JS修改body背景色

无需CSS变量，直接操作DOM元素的样式：

<head>
  <script>
    // 页面加载完成后执行代码
    window.onload = function() {
      var bgcolor = "#ff0000";
      document.body.style.backgroundColor = bgcolor;
    }
  </script>
</head>
<body>
</body>

方案2：CSS自定义属性配合JS设置

先定义CSS自定义属性，再通过JS修改其值：

<head>
  <style>
    body {
      background-color: var(--bgcolor);
    }
  </style>
  <script>
    window.onload = function() {
      var bgcolor = "#ff0000";
      // 给根元素设置CSS自定义属性
      document.documentElement.style.setProperty('--bgcolor', bgcolor);
    }
  </script>
</head>
<body>
</body>

扩展：添加输入交互实现动态更改

如果要根据用户输入修改背景色，可以增加输入框和按钮：

<head>
  <script>
    function changeBgColor() {
      var colorInput = document.getElementById('colorInput');
      var newColor = colorInput.value;
      // 简单验证十六进制颜色格式
      if (/^#[0-9A-Fa-f]{6}$/.test(newColor)) {
        document.body.style.backgroundColor = newColor;
      } else {
        alert('请输入正确的十六进制颜色值，例如#ff0000');
      }
    }
  </script>
</head>
<body>
  <input type="text" id="colorInput" placeholder="输入十六进制颜色，如#ff0000">
  <button onclick="changeBgColor()">更改背景色</button>
</body>

内容的提问来源于stack exchange，提问作者fzytail