Javascript 将颜色从数组设置为多个元素

我有一个包含一些颜色的数组。我还有一个带有一些子元素的div。我试图实现的是，每个子元素将从数组中获得一种颜色。我很接近，我可以用控制台记录颜色，但现在孩子的孩子被分配了数组中的最后一种颜色

var colors=[“e57373”、“ba68c8”、“90caf9”、“4db6ac”、“dce775”、“ffb74d”、“b0bec5”、“81c784”]；
var setColors=customizeContainer.childNodes；
对于（变量i=1；i}

您的代码中有几处做错了

• 双循环：不必要地迭代子节点和颜色数组
• 在第一个循环中将计数器增加2

您需要迭代

颜色

数组一次，如果索引存在对应的子节点，则设置颜色

var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#81c784"];
var setColors = customizeContainer.childNodes;
for (var i = 1; i < colors.length; i++) {
        if (setColors[i] != 'undefined') {
            setColors[i].style.backgroundColor = colors[i];
        }
    }
}

var colors=[“e57373”、“ba68c8”、“90caf9”、“4db6ac”、“dce775”、“ffb74d”、“b0bec5”、“81c784”]；
var setColors=customizeContainer.childNodes；
对于（变量i=1；i

使用

queryselectoral（）

来定位元素。以下内容更简单、更简洁：

var colors=[“e57373”、“ba68c8”、“90caf9”、“4db6ac”、“dce775”、“ffb74d”、“b0bec5”、“81c784”]；
var el=document.queryselectoral（'#customizeMenu>.l1'）；
//或者（如果您使用的是较旧的浏览器）
//var el=[].slice.call（document.queryselectoral（'#customizeMenu>.l1'）；
el.forEach（功能（项目一）{
item.style.backgroundColor=颜色[i]；
});

A.
B
C
D
E
F
J
H
我
这是一个解决方案，一旦全部使用颜色，它将循环使用颜色


var colors=[“e57373”、“ba68c8”、“90caf9”、“4db6ac”、“dce775”、“ffb74d”、“b0bec5”、“81c784”]；
var customizeContainer=Array.from（document.queryselectoral（'#customizeMenu>div'）；
customizeContainer.forEach（函数（节点，i）{
node.style.backgroundColor=颜色[i%colors.length]；
});
#customizeMenu>div{
宽度：2米；
高度：2米；
显示：内联块；
}

我发现了两个bug：

忽略子div的高度（因此您将看不到div显示和更改。）
循环错误（应使用一个循环。）

var colors=[“e57373”、“ba68c8”、“90caf9”、“4db6ac”、“dce775”、“ffb74d”、“b0bec5”、“81c784”]；
var customizeContainer=document.getElementById（“customizeMenu”）；
var setColors=customizeContainer.children；
对于（var i=0；i

.l1{
高度：10px；
宽度：10px；
背景：绿色；
浮动：左；
保证金：5px；
}
这里是一个工作片段

可以避免双循环，并使用getElementsByCassName（）创建元素数组

希望能有帮助


var setColors=document.getElementsByClassName（'l1'）；
var colors=[“e57373”、“ba68c8”、“90caf9”、“4db6ac”、“dce775”、“ffb74d”、“b0bec5”、“81c784”]；
对于（var i=0；i

.l1{
最小宽度：5vw；
最小高度20px；
背景：红色；
利润率：0.5px；
显示：内联块；
}

 
 
 
 
 
 
 
 
 
为什么是双循环？请描述所需的输出检查我的编辑，上传一个img，描述我试图实现的目标。每个元素应该有不同的颜色。@SanderHellesø您有8种颜色，但有9个元素。最后一个应该是什么颜色？使用双循环的原因是子元素以一种非常奇怪的方式进行排序。元素实际上是1-3-5等。。0-2-4只是一个“文本”元素，idk为什么会这样is@SanderHellesø那是因为您使用了
.childNodes
，它还返回文本节点（
div
元素之间的空格）。啊，现在我明白了。感谢您的支持。
.forEach（）
在节点列表上还不受所有浏览器的支持。使用
[].slice.call（document.queryselectoral（'.l1'））
获得完全支持。您也可以使用ES6
Array.from（）
，但要保持完全支持，前者才是正确的选择。@frosty，谢谢你的观点。我更新了答案，提到了这一点。