Question

我怎样才能在CSS中使用每个数组并对它们进行不同的样式而不是JS？

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

＆＃xD;＆＃xA; < pre class =“snippet-code-js lang-js prettyprint-override”>

 count = ['1'，'2'，'3'，'4'];＆＃xD;＆＃xA; container =的document.getElementById（ 'itemsContainer'）;＆＃的xD;＆＃XA; for（i = 0; i＆lt; count.length; i ++）{＆＃xD;＆＃xA; container.innerHTML + ='＆lt; div class =“items”＆gt;＆lt; / div＆gt;';＆＃xD;＆＃xA; }＆＃xD;＆＃xA;＆＃xD;＆＃xA; var square = document.getElementsByClassName（'items'）[2];＆＃xD;＆＃xA; square.style.backgroundColor ='red';

＆＃xD;＆＃xA;

  .items {＆＃xD;＆＃xA;边距：10px的;＆＃的xD;＆＃XA;宽度：20像素;＆＃的xD;＆＃XA;高度：20像素;＆＃的xD;＆＃XA; background：gold;

＆＃xD;＆＃xA;

 ＆lt; div id =“itemsContainer”＆gt ;＆LT; / DIV＆GT;

＆＃的xD;＆＃XA;

＆＃的xD;＆＃XA;  ＆＃XA;

Answer 1

使用nth-child()伪类选择器，我们可以区分元素，而不在元素本身上有任何唯一标识符。我们甚至不需要阵列。

＆＃13;

container = document.getElementById('itemsContainer');

for(i = 0; i < 6; i++){
    container.innerHTML+='<div class="items"></div>';
}

＆＃13;

.items{
  margin-top:10px;
  width:20px;
  height:20px;
  background:gray;
 }

.items:nth-child(1){ background:gold; }
.items:nth-child(2){ background:green; }
.items:nth-child(3){ background:red; }
.items:nth-child(4){ background:blue; }

＆＃13;

<div id="itemsContainer"></div>

＆＃13;

Answer 2

更改您的JS以为每个项创建一个唯一的类，然后在您的CSS中引用这些类

＆＃13;

count = ['1','2','3','4'];
container = document.getElementById('itemsContainer');
  for(i = 0; i < count.length; i++){
    container.innerHTML+='<div class="items item' + i + '"></div>';
  }

＆＃13;

.items{
  margin-top:10px;
  width:20px;
  height:20px;
  background:gold;}

.item1 {
  background: green;
}
.item2 {
  background: blue;  
}

＆＃13;

<div id="itemsContainer"></div>

＆＃13;

如何在CSS中设置样式和Array对象

2 个答案: