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

javascript解决方案，您无需在函数bgColor（）中传递agrumenst；

    bgColor();
    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 = '<h3>box</h3>'+tblHTML ;  
    }

   window.onload = bgColor;

jQuery解决方案

bgColor();

 function bgColor() {

  var tableCntr = jQuery('#box');
  var tblHTML = '';
  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.html( tblHTML );  
}

window.onload = bgColor;

Answer 2

为什么这么复杂...

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');

Answer 3

 function bgColor(id) { var divs = document.getElementById(id).getElementsByTagName('div'), colors = ['red','blue','green','orange', 'black', 'purple']; [].forEach.call(divs, function(d, index) { d.setAttribute('style', 'background-color: ' + colors[index % colors.length]); }); } bgColor('box'); 

 #box div { width: 30px; height: 30px; margin-right: 5px; margin-bottom: 1px; background-color: black; } 

 <div id="box"> <h3>box</h3> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> </div> 

Answer 4

似乎是一种解决方案https://jsfiddle.net/8rkceLv9/3/您只需选择#box内的所有div并#box设置背景。 我看不到数组中的点。