[英]javascript iterate through div changing the background colour
我想為每個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;
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;
為什么這么復雜...
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');
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> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div>
似乎是一種解決方案https://jsfiddle.net/8rkceLv9/3/您只需選擇#box
內的所有div並#box
設置背景。 我看不到數組中的點。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.