如何遍历对象为动态创建的每个div赋值对应的颜色样式

问题原因 #

• 代码执行顺序错误：设置颜色的代码运行时，动态创建的div还没被插入到页面中，document.querySelectorAll("div") 只能拿到初始页面里的#slider-container这1个div，后续创建的元素根本没被选中
• 颜色设置逻辑错误：两层循环会反复覆盖所有div的颜色，最后一次遍历赋值的是红色，所以所有文本都显示为红色
• 没有按照要求用className控制样式，而是直接操作了style属性

修复方案 #

首先在style.css中提前定义对应颜色的样式类：

.text-red {
  color: red;
}
.text-green {
  color: green;
}
.text-blue {
  color: blue;
}

修改JS代码，把创建元素和添加类名的逻辑合并，删除原有错误的颜色设置循环：

const container = document.querySelector("#slider-container");

const data = [
  { name: "halfords", color: "red", logo: "" },
  { name: "microsoft", color: "green", logo: "" },
  { name: "posca", color: "blue", logo: "" }
];

// 创建元素时直接绑定对应样式类
function createMenuItem(item) {
  let div = document.createElement("div");
  div.textContent = item.name;
  div.classList.add(`text-${item.color}`);
  return div;
}

document.addEventListener("DOMContentLoaded", function () {
  for (let i = 0; i < data.length; i++) {
    container.appendChild(createMenuItem(data[i]));
  }
});

HTML代码无需改动，运行后即可实现预期的颜色效果。

内容的提问来源于stack exchange，提问作者dan-wearebeard