使用 CSS 更改循环中元素的背景

在前端开发中，经常需要通过 JavaScript 循环来操作多个元素。这时，我们可能会遇到需要给这些元素设置背景色的情况。而此时，我们可以使用 CSS 来实现批量更改元素背景色的目的。

方法

通过 JavaScript 循环来操作多个元素，我们可以使用 for 循环、forEach 方法等等。但是，无论使用何种方法，我们都可以通过添加 class 名称的方式来为元素添加样式。因此，我们只需要在 CSS 中定义好相应的 class 样式，然后在循环中为需要更改背景色的元素添加该 class 名称即可。

以下是一个具体的例子：

// 获取所有需要更改背景色的元素（假设所有元素的 class 名称为 "target"）
const targets = document.querySelectorAll(".target");

// 为每个元素添加名为 "highlight" 的 class
for (let i = 0; i < targets.length; i++) {
  targets[i].classList.add("highlight");
}

在上述例子中，我们首先使用 querySelectorAll 方法获取了所有需要更改背景色的元素，然后通过 for 循环遍历并为每个元素添加了名为 "highlight" 的 class。接下来，在 CSS 中定义该 class 的样式即可：

.highlight {
  background-color: yellow;
}

如此，我们就可以使用 CSS 更改循环中元素的背景了。

总结

通过添加 class 名称的方式，我们可以使用 CSS 来批量更改循环中元素的背景色。这种方式不仅比直接在 JavaScript 中更改元素样式更加方便，同时也符合前端优化的思路。