JavaScript中为多个Div元素应用样式的问题

AI 小北

2026-5-25

嘿，我来帮你搞定这个问题！你遇到的两个核心问题其实很好解决，咱们一步步来：

先说说你碰到的两个问题根源

'i未定义'错误：你在循环里直接用了i但没提前声明它，JavaScript会把它当成全局变量（严格模式下直接报错），所以一定要用let或者const来声明循环变量。
for...in遍历无效：document.querySelectorAll(".box")返回的是NodeList（类数组对象），for...in会遍历它的所有可枚举属性——包括length、forEach这些内置方法，而不是只遍历里面的DOM元素，所以自然没法给元素加样式。

给你三种可行的解决方案

方案1：用NodeList自带的`forEach`方法（最简洁）

NodeList本身就支持forEach，直接遍历每个元素就行：

// 先获取所有.box元素
const boxes = document.querySelectorAll(".box");

// 比如绑定一个点击事件触发样式修改
yourTriggerElement.addEventListener('click', () => {
  const pickedColor = "#ff6347"; // 替换成你要的颜色
  boxes.forEach(box => {
    box.style.backgroundColor = pickedColor;
  });
});

方案2：用`for...of`循环（ES6+推荐）

for...of是专门遍历可迭代对象的语法，NodeList属于可迭代对象，用它遍历只会拿到DOM元素：

const boxes = document.querySelectorAll(".box");

yourTriggerElement.addEventListener('click', () => {
  const pickedColor = "#4682b4";
  for (const box of boxes) {
    box.style.backgroundColor = pickedColor;
  }
});

方案3：传统`for`循环（兼容旧环境）

如果需要兼容比较老的浏览器，用传统for循环记得要声明i：

const boxes = document.querySelectorAll(".box");

yourTriggerElement.addEventListener('click', () => {
  const pickedColor = "#32cd32";
  // 用let声明i，避免未定义错误
  for (let i = 0; i < boxes.length; i++) {
    boxes[i].style.backgroundColor = pickedColor;
  }
});