배열 색인을 사용하여 배경색을 요소로 변경하십시오.

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

나는 [내가]에 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

배열 색인을 사용하여 배경색을 요소로 변경하십시오.

답변

관련 문제