允许用户在 JavaScript 中更改背景颜色

Question

我希望能够在单击特定按钮时更改背景颜色，例如 btnRed 将背景颜色更改为红色。 我可以将背景更改为蓝色，但我无法让其他颜色工作，我希望能够使用多种颜色来做到这一点。 这可以只用 HTML 和 JavaScript 来完成吗？ 我在下面提供了我的代码。 感谢您的帮助。

HTML

<button class="btnBlue">Blue</button>
<button class="btnRed">Red</button>
<button class="btnGreen">Green</button>
<button class="btnOrange">Orange</button>
<button class="btnYellow">Yellow</button>
<button class="btnPink">Pink</button>
<button class="btnPurple">Purple</button>
<button class="btnBrown">Brown</button>
<button class="btnBlack">Black</button>
<button class="btnGray">Gray</button>

JavaScript

var button = document.querySelector("button");    
var isBlue = false;

button.addEventListener("click",function()
    {
        if(isBlue)
        {
            document.body.style.background = "white";
            isBlue = false;
        }
        else
        {
            document.body.style.background = "blue";
            isBlue = true;
        }
    });

Answer 1

您可以使用按钮的文本作为颜色。

注意：我会给所有这些按钮相同的类属性，这样你就可以轻松地选择它们

 const colorButtons = [...document.querySelectorAll('.colorButton')]; document.addEventListener('click', e => { if (.colorButtons.includes(e;target)) return. document.body.style.background = e.target;textContent; });

 <button class="colorButton">Blue</button> <button class="colorButton">Red</button> <button class="colorButton">Green</button> <button class="colorButton">Orange</button> <button class="colorButton">Yellow</button> <button class="colorButton">Pink</button> <button class="colorButton">Purple</button> <button class="colorButton">Brown</button> <button class="colorButton">Black</button> <button class="colorButton">Gray</button>

Answer 2

这样做的一种方法是：

HTML:

<button class="btnBlue"     onclick="changeColor('blue')">Blue</button>
<button class="btnRed"      onclick="changeColor('red')">Red</button>
<button class="btnGreen"    onclick="changeColor('green')">Green</button>
<button class="btnOrange"   onclick="changeColor('orange')">Orange</button>
<button class="btnYellow"   onclick="changeColor('yellow')">Yellow</button>
<button class="btnPink"     onclick="changeColor('pink')">Pink</button>
<button class="btnPurple"   onclick="changeColor('purple')">Purple</button>
<button class="btnBrown"    onclick="changeColor('brown')">Brown</button>
<button class="btnBlack"    onclick="changeColor('black')">Black</button>
<button class="btnGray"     onclick="changeColor('gray')">Gray</button>

Java脚本：

function changeColor(colorName) {
    document.body.style.background = colorName;
}

Answer 3

这将完美地工作

<button type="button" onclick="myFunction()">Set background color</button>

<script>
function myFunction() {
    document.body.style.backgroundColor = "red";
}
</script>

请参阅参考资料： https ://www.w3schools.com/jsref/prop_style_backgroundcolor.asp

Answer 4

使用 CSS 进行样式更改总是比使用内联样式或使用 javascript 更好 - 下面只是抓取您单击的按钮的文本并将其作为类名应用于正文。 每个类都有关联的样式，以便在选择时应用。

 var buttons = document.querySelectorAll("button"); var body = document.querySelector("body"); buttons.forEach(function(button){ button.addEventListener("click",function(){ var color = this.textContent.toLowerCase(); body.className= color; }); })

 .blue {background-color: blue}.red {background-color: red}.green {background-color: green}.orange {background-color: orange}.yellow {background-color: yellow}.pink {background-color: pink}.purple {background-color: purple}.brown {background-color: brown}.black {background-color: black}.gray {background-color: gray}

 <button class="btnBlue">Blue</button> <button class="btnRed">Red</button> <button class="btnGreen">Green</button> <button class="btnOrange">Orange</button> <button class="btnYellow">Yellow</button> <button class="btnPink">Pink</button> <button class="btnPurple">Purple</button> <button class="btnBrown">Brown</button> <button class="btnBlack">Black</button> <button class="btnGray">Gray</button>