javascript - 使用类更改单击时的背景颜色

Question

这是我的代码：

function black() {
document.querySelectorAll(".object").style.backgroundColor = "black";
}

function red() {
document.querySelectorAll(".object").style.backgroundColor = "red";
}

function blue() {
document.querySelectorAll(".object").style.backgroundColor = "blue";
}

.object {
width: 200px;
height: 200px;
background-color: black;
margin: 20px;
}

<button id="button_black" class="color_change" onclick="black()" value="black">Black</button>
<button id="button_red" class="color_change" onclick="red()" value="red">Red</button>
<button id="button_blue" class="color_change" onclick="blue()" value="blue">Blue</button>


<div class="object"></div>
<div class="object"></div>

不幸的是，它不起作用。如果我将 »document.querySelectorAll« 更改为 »document.querySelector« 并改用 ID，则它适用于一个对象。但我需要它作为类。怎么可能解决这个问题？

唐克斯。

标签： javascriptcolors

Answer 1

您的问题是document.querySelectorAll返回一个 NodeList，您需要遍历其中的值，更改每个值的背景：

function black() {
document.querySelectorAll(".object").forEach(v => v.style.backgroundColor = "black");
}

function red() {
document.querySelectorAll(".object").forEach(v => v.style.backgroundColor = "red");
}

function blue() {
document.querySelectorAll(".object").forEach(v => v.style.backgroundColor = "blue");
}

.object {
width: 200px;
height: 200px;
background-color: black;
margin: 20px;
}

<button id="button_black" class="color_change" onclick="black()" value="black">Black</button>
<button id="button_red" class="color_change" onclick="red()" value="red">Red</button>
<button id="button_blue" class="color_change" onclick="blue()" value="blue">Blue</button>


<div class="object"></div>
<div class="object"></div>