使用數組索引將背景顏色更改爲元素

我已經創建了一個ul元素，並且在裏面放了一些li項。我想使用for循環中的數組來更改每個li項目的背景顏色。這是我，但結果只是一個字符串:(使用數組索引將背景顏色更改爲元素

"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); 
}

CSS代碼僅僅是這樣的：

#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; 
}

我不知道如何使colorArray [一]返回類的屬性，而不僅僅是字符串。我現在正在學習，所以請不要對我做出判斷太難了:)

來源

2016-08-07 Tsenko Aleksiev

您首先使用color1，color2，但在您的css中使用color-1，color-2，..刪除 - 在您的css文件中的名稱，然後重試。 – Dennisvdh

OMG !!!!!!!!我真笨！我一直在觀看過去4小時的這段代碼！什麼都沒有發生，我沒有看到！：@謝謝，謝謝你的提問:) –

@Dennisvdh Ahhh在我回答之前，我沒有看到你的評論。道歉。 –

"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; 
 
}

來源

2016-08-07 11:37:04

使用數組索引將背景顏色更改爲元素

回答

相關問題