时间戳

首页 > 解决方案 > 如何在 HTML 中更改页面的背景颜色？

javascript - 如何在 HTML 中更改页面的背景颜色？

问题描述

我对 HTML/CSS/JavaScript 很陌生，我想知道如何结合 JavaScript 更改背景颜色？我有 3 个按钮（红色、绿色和蓝色），每当用户按下三个按钮中的一个时，背景都会相应改变。

目前，只有“红色”按钮有效。蓝色和绿色按钮的背景不会改变。

提前致谢！

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>My Webpage</title>
    </head>
    <body>
        <button id = "red" value = "red">R</button>
        <button id = "green" value = "green">G</button>
        <button id = "blue" value = "blue">B</button>
        <script>
            document.querySelector('button').onclick = function() {
                document.querySelector('body').style.backgroundColor = this.value;
            }
        </script>
    </body>
</html>

标签： javascript

解决方案

使用: document.querySelectorAll，然后使用document.queryselectorall

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>My Webpage</title>
    </head>
    <body>
        <button id = "red" value = "red">R</button>
        <button id = "green" value = "green">G</button>
        <button id = "blue" value = "blue">B</button>
        <script>
            document.querySelectorAll('button').forEach(function(element) {
                element.onclick = function() {
                    document.body.style.backgroundColor = this.value;
                }
            })
        </script>
    </body>
</html>

小提示：使用document.body（文档）而不是document.querySelector('body')加快速度；）

推荐阅读