Question

我已经创建了一个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 [i]返回类属性，而不仅仅是字符串。我现在正在学习，所以请不要过分评判我：）

使用数组索引将背景颜色更改为元素

0 个答案: