如何使用javascript使用按钮更改正文的背景颜色

How to change the body's background color with buttons using javascript?

本文关键字：正文 背景 颜色 按钮 何使用 javascript      更新时间：2023-09-26

我正在尝试将正文的整个背景颜色更改为按钮分配的颜色。我是javascript的新手，但我查看了互联网和我的笔记，找不到问题。我想我只是错过了一些非常简单的烦恼，我可能会很糟糕。

目录

<nav>
        <ul>
            <li>
                <button onclick="white()">
                    <p>White</p>
                </button>
            </li>
            <li>
                <button onclick="red()">
                    <p>Red</p>
                </button>
            </li>
            <li>
                <button onclick="yellow()">
                    <p>Yellow</p>
                </button>
            </li>
            <li>
                <button onclick="blue()">
                    <p>Blue</p>
                </button>
            </li>
        </ul>
    </nav>

JAVASCRIPT

function white() {
    document.body.backgroundColor("white");
}
function red() {
    document.body.backgroundColor("red");
}
function yellow() {
    document.body.backgroundColor("yellow");
}
function blue() {
    document.body.backgroundColor("blue");
}
backgroundColor是一个

属性，而不是一个函数。这是一个style属性。将您的行更改为以下内容：

document.body.style.backgroundColor = "yellow"

此外，onClick属性有点过时了。您可以尝试在 JavaScript 本身中使用事件处理程序（更多信息）。

document.body.style.backgroundColor = "white"; // or any other color

有关MDN中style属性的更多信息。

您的想法是正确的，您只需要确保正确选择窗口的body元素：

document.querySelector('body').style.backgroundColor

因此，您的函数将如下所示：

function white() {
    document.querySelector('body').style.backgroundColor = "white";
}
....

注意：

确保你把你的JavaScript也放在网页的末尾，你还没有！

相关文章：