仅使用JavaScript填充div

Question

我想用四种颜色填充不同的div，只使用javascript（当然是HTML结构），这是代码：

HTML

<div id="content">
    <div id="carre1" class="carre">1</div>
    <div id="carre2" class="carre">2</div>
    <div id="carre3" class="carre">3</div>
    <div id="carre4" class="carre">4</div>
</div>

JS

var colors = {
    count: 4,
    tab : ["red","orange","yellow","green"]}
    ;

假设我想让div“carre1”变红，我该怎么做？

提前致谢！

Answer 1

  for (var i = 0; i < colors.tab.length; i++) {
        document.getElementById("carre" + (i + 1)).style.backgroundColor= colors.tab[i];

Answer 2

简而言之：

for (var i=1; i<=colors['count']; i++) {
    document.getElementById("carre" + i).style.backgroundColor = colors['tab'][i-1];
}

请参阅此jsfiddle。

也适用于此jsfiddle中的colors.tab和colors.count。

Answer 3

这就是你如何用颜色填充div的颜色：

carre = document.getElementsByClassName('carre');
for(i=0;i<colors.count;i++){
     carre[i].style.backgroundColor = colors.tab[i];
}

Answer 4

document.getElementById("carre1").style.backgroundColor=colors.tab[0];