如何通过下拉菜单切换页面背景渐变色？

嘿，我来帮你搞定这个问题！你遇到的JSFiddle能正常运行但本地浏览器不行的情况，大概率是几个常见的小细节导致的，咱们一步步排查解决：

1. 脚本执行时机不对 #

JSFiddle默认会把你的脚本放在DOM完全加载完成后执行，但如果在本地你把JS代码直接放在<head>标签里，浏览器会在<select>元素还没渲染出来的时候就运行代码——这时候document.getElementById('selectColor')会返回null，自然绑定不了onchange事件。

解决方案：把JS代码包裹在DOM加载完成的监听事件里，或者把脚本标签移到<body>的最后面。比如：

// 等待DOM完全加载后再执行脚本
document.addEventListener('DOMContentLoaded', function() {
  var sel = document.getElementById('selectColor');
  sel.onchange = function() {
    document.body.className = sel.value;
  };
});

2. HTML转义字符问题 #

你提供的HTML代码里用了<和>这些转义字符，这在纯HTML文件里是错误的写法——浏览器会把它们当成普通文本，而不是解析成<select>元素。你需要把这些转义字符换成正常的尖括号：

<select id="selectColor">
  <option value=""></option>
  <option value="PurpleGradient">Purple2</option>
  <option value="BlueGradient">Blue</option>
</select>

3. CSS样式一致性优化（可选） #

你的CSS里PurpleGradient用了background-color，而BlueGradient用了background，虽然功能没问题，但为了统一和避免潜在的优先级冲突，建议都用background属性：

body.PurpleGradient { 
  background: #6899f8; 
}
body.BlueGradient { 
  background: linear-gradient(to right bottom, #6614e5, #620fc3, #5a0ca4, #510c85, #450d69); 
}

完整可运行示例 #

把下面的代码保存成HTML文件，在浏览器里打开就能正常工作了：

<!DOCTYPE html>
<html>
<head>
  <style>
    body.PurpleGradient { 
      background: #6899f8; 
    }
    body.BlueGradient { 
      background: linear-gradient(to right bottom, #6614e5, #620fc3, #5a0ca4, #510c85, #450d69); 
    }
  </style>
</head>
<body>
  <select id="selectColor">
    <option value=""></option>
    <option value="PurpleGradient">Purple2</option>
    <option value="BlueGradient">Blue</option>
  </select>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var sel = document.getElementById('selectColor');
      sel.onchange = function() {
        document.body.className = sel.value;
      };
    });
  </script>
</body>
</html>

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