这是一个非常简单的问题,但我不知道为什么它不起作用.我有一个包含4个项目的数组.我有一个容器,我想根据我的数组中的项目数插入一些div.我为此使用了for循环,但它只创建了一个div.它不应该创建4个相同的div元素吗?
这是代码:
count = new Array['1', '2', '3', '4'];
container = document.getElementById('items');
for (i = 0; i < count.length; i++) {
container.innerHTML += '<div id="items"></div>';
}
Run Code Online (Sandbox Code Playgroud)
#items {
width: 20px;
height: 20px;
background: gold;
}
Run Code Online (Sandbox Code Playgroud)
<div id="items"></div>
Run Code Online (Sandbox Code Playgroud)
我如何才能在 CSS 中而不是 JS 中获取每个数组并对其进行不同的样式?
count = ['1','2','3','4'];
container = document.getElementById('itemsContainer');
for(i = 0; i < count.length; i++){
container.innerHTML+='<div class="items"></div>';
}
var square= document.getElementsByClassName('items')[2];
square.style.backgroundColor='red';
Run Code Online (Sandbox Code Playgroud)
.items{
margin-top:10px;
width:20px;
height:20px;
background:gold;
Run Code Online (Sandbox Code Playgroud)
<div id="itemsContainer"></div>
Run Code Online (Sandbox Code Playgroud)