使用Select选项与提交按钮实现网页背景色全量修改的JS/HTML问询

原代码存在的问题 #

1. JS中重复声明变量optionselected，且硬编码背景色为红色，未使用用户选中的颜色
2. 下拉选项(<option>)未设置value属性，无法正确获取选中的颜色值
3. 直接给*设置行内样式会覆盖元素原有样式，且性能不佳

修正后的实现方案 #

推荐使用CSS变量实现，只需修改根元素的变量值，所有引用该变量的元素会自动更新背景色，更高效简洁。

完整代码

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义全局CSS变量，所有元素默认使用该变量作为背景色 */
        :root {
            --bg-color: #ffffff;
        }
        * {
            background-color: var(--bg-color);
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <p><b><u>customize the background color!</b></u></p>
    <label for="Colors"> Select a Color:</label>
    <select id="Colors">
        <!-- 给每个option添加对应颜色的value属性 -->
        <option value="red" style="background-color:red;">Red</option>
        <option value="green" style="background-color:green;">Green</option>
        <option value="blue" style="background-color:blue;">Blue</option>
    </select>
    <br><br>
    <button onclick="ChangeBackground();">Submit Change</button>

    <script>
        function ChangeBackground() {
            // 获取下拉框选中的颜色值
            const selectedColor = document.querySelector("#Colors").value;
            // 修改根元素的CSS变量，实现全页面背景色更新
            document.documentElement.style.setProperty('--bg-color', selectedColor);
        }
    </script>
</body>
</html>

关键修正点说明 #

• 给每个<option>添加value属性，存储对应的颜色值，确保能正确获取用户选择的颜色
• 使用:root定义全局CSS变量--bg-color，所有元素的背景色引用该变量
• JS中只需修改根元素的变量值，无需遍历所有元素，性能更优
• 若不需要保留元素原有样式，也可以直接设置document.body和document.documentElement的背景色，但CSS变量的方式更灵活

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