Применение стиля к нескольким Div в JavaScript

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:

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

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

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