javascript迭代div改变背景颜色

Question

我想自动将每个 div 的背景颜色更改为不同的背景颜色，每个 div 应该有不同的颜色。

我不完全确定为什么我的 html 没有正确显示以及为什么我得到 [object HTMLCollection]

我的 HTML:

<div id="box">
    <h3>box</h3>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

我使用的函数是:

bgColor(document.getElementById('box').getElementsByTagName('div'));

    function bgColor() {

      var tableCntr= document.getElementById('box');
      var tblHTML = document.getElementsByTagName('div');

      var colors = [['red','blue','green'],['orange', 'black', 'purple']]  ;

        for(var i=0;i<colors.length;i++) {

          for(var j=0;j<colors[0][0].length;j++) {
            tblHTML += "<div style='background:" + colors[i][j] + "'> </div>" ;
          }
       }
      tableCntr.innerHTML = tblHTML ;  
    }

    window.onload = bgColor;

jsfiddle

Answer 1

为什么这么复杂......

function bgColor(ID) {

  var tableCntr= document.getElementById(ID);
  var DIVs = tableCntr.getElementsByTagName('div');

  var colors = ['red','blue','green','orange', 'black', 'purple']  ;

  var colourIndex = 0;
  for(var i=0;i<DIVs.length;i++) {

     DIVs[i].setAttribute('style','background-color: '+colors[colourIndex]);
     colourIndex = (colourIndex + 1) % colors.length;
  }
}

bgColor('box');