Question

如果有人回答道歉，我搜索了大约30分钟，但找不到我要找的答案。

我想在一个变量中选择多个HTML div，然后在事件中对它们应用样式。我已尝试设置boxes[i].style.backgroundColor = pickedColor;之类的变量，但会引发错误i is not defined，然后我尝试了下面的代码，似乎都无法正常工作。

const boxes = document.querySelectorAll(".box");
for (i in boxes) {
    boxes[i].style.backgroundColor = "lightblue";
}

<div class="header box"></div>
<div class="footer box"></div>

我们将非常感谢任何想法，文章或信息。非常感谢大家和快乐的编码！

Answer 1

for...in遍历对象中的可枚举属性，因此在您的情况下使用它是不正确的：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

querySelectorAll返回一个NodeList，它有一个方便的forEach方法：

boxes.forEach(box => box.style.backgroundColor = "lightblue");

Answer 2

你能说得更冗长吗

for (let i= 0; i < boxes.length; i++) {
     const element = boxes[i];
     boxes[i].style.backgroundColor = "lightblue";
}

我不确定语法并且没有测试过您的代码，但似乎可能是这样？

Answer 3

querySelectorAll没有返回数组。你可以像这样解决这个问题：

var boxes = Array.slice.call(document.querySelectorAll(".box"));
for (i in boxes) {
    boxes[i].style.backgroundColor = "lightblue";
}

或使用新的ES2015传播运营商：

＆＃13;

const boxes = [...document.querySelectorAll(".box")];
for (const box of boxes) {
    box.style.backgroundColor = "lightblue";
}

＆＃13;

.box {
  height: 100px;
  width: 100px;
  border: 2px solid black;
}

＆＃13;

<div class="header box"></div>
<div class="footer box"></div>

＆＃13;