Question

我希望能够通过单击彩色按钮来更改背景的颜色。我在实践中做了一个简短的示例，我想对其进行扩展，但是我不确定如何编写。我在CSS中有一些代码，但是我想看看仅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>

Javascript：

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>

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

4 个答案: