我需要构建一个包含 3000 个正方形的小部件。手动执行此操作会花费很长时间,也许你们中的一些人知道生成 .square 类 3000 次的最简单方法?我还需要能够改变每个方块的内容,例如颜色、标题等。谢谢朋友!
<div class="square">
<h1>10</h1>
</div>
https://jsfiddle.net/srowf8hg/ https://jsfiddle.net/srowf8hg/
您只需要一个循环并在每次迭代时创建一个新的正方形。为了能够单独访问每个方块,每个生成的方块都有自己唯一的 ID:
var cont = document.getElementById("container");
for(var i = 1; i <3001; ++i){
var div = document.createElement("div");
div.setAttribute("class", "square");
div.setAttribute("id", "div" + i);
var h1 = document.createElement("h1");
h1.textContent = i;
div.appendChild(h1);
cont.appendChild(div);
}
.square{
background:#fa5339;
color:#fff;
width:100px;
height:100px;
float:left;
border:1px solid #d63d26;
}
h1{
height: 50%;
width:100%;
display:flex;
align-items: center;
justify-content: center;
}
<div id=container>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)