配列インデックスを使用して要素の背景色を変更する

Question

私はul要素を作成しましたが、いくつかのli項目を内部に入れました。 forループの配列を使って各li項目の背景色を変更したい。これは私が持っているものですが、結果は、CSSのコードはこれだけです単なる文字列:(

"use strict"; 

var colorArray, 
    i, 
    ulVar, 
    listItem; 

colorArray = [ 
     "color1", 
     "color2", 
     "color3", 
     "color4", 
     "color5", 
     "color6" 
] 

ulVar = document.createElement("ul"); 
ulVar.setAttribute("id", "#text-color"); 
ulVar.innerText = "Some unordered list" 
document.body.appendChild(ulVar); 

for(i = 0; i < colorArray.length; i++){ 
    listItem = document.createElement("li"); 
    listItem.setAttribute("class", colorArray[i]); 
    console.log(listItem.getAttribute("class")); //just to check what's inside 
    listItem.innerText = colorArray[i]; 
    ulVar.appendChild(listItem); 
} 

です：

#text-color { 
color: #fff; 
} 

.color-1 { 
    background-color: #0000ff; 
} 

.color-2 { 
    background-color: #ff6600; 
} 

.color-3 { 
    background-color: #cc00cc; 
} 

.color-4 { 
    background-color: #009933; 
} 

.color-5 { 
    background-color: #669999; 
} 

.color-6 { 
    background-color: #663300; 
} 

私は[i]はにcolorArrayを作る方法がわかりませんクラスのプロパティだけでなく、文字列を返します。私はあまりにもハード私を判断しないでください:)

Answer 1

"use strict"; 
 

 
var colorArray, 
 
    i, 
 
    ulVar, 
 
    listItem; 
 

 
colorArray = [ 
 
     "color-1", 
 
     "color-2", 
 
     "color-3", 
 
     "color-4", 
 
     "color-5", 
 
     "color-6" 
 
] 
 

 
ulVar = document.createElement("ul"); 
 
ulVar.setAttribute("id", "#text-color"); 
 
ulVar.innerText = "Some unordered list" 
 
document.body.appendChild(ulVar); 
 

 
for(i = 0; i < colorArray.length; i++){ 
 
    listItem = document.createElement("li"); 
 
    listItem.setAttribute("class", colorArray[i]); 
 
    console.log(listItem.getAttribute("class")); //just to check what's inside 
 
    listItem.innerText = colorArray[i]; 
 
    ulVar.appendChild(listItem); 
 
}

#text-color { 
 
color: #fff; 
 
} 
 

 
.color-1 { 
 
    background-color: #0000ff; 
 
} 
 

 
.color-2 { 
 
    background-color: #ff6600; 
 
} 
 

 
.color-3 { 
 
    background-color: #cc00cc; 
 
} 
 

 
.color-4 { 
 
    background-color: #009933; 
 
} 
 

 
.color-5 { 
 
    background-color: #669999; 
 
} 
 

 
.color-6 { 
 
    background-color: #663300; 
 
}

今学んでいます