무순서 목록의 모양을 바꾸어 줄무늬로 만들고 싶다.
선택자 API를 사용해서 목록의 모든 항목을 가져온 뒤 배경색을 바뀌면 된다.
var lis = document.querySelectorAll('li:nth-child(2n+1)');
for(var i=0; i<lis.length; i++){
lis[i].setAttribute("style", "background-color:#ffeeee");
}
다음과 같이 작성할 수도 있다.
var lis = document.querySelectorAll('li:nth-child(odd)');
for(var i=0; i<lis.length; i++){
lis[i].setAttribute("style", "background-color:#ffeeee");
}
또는 목록 부모 요소에 접근한 뒤 자식 노드를 탐색하며 홀수 요소마다 배경색을 바꾸는 방법도 있다. 홀수 요소는 나눗셈 연산을 통해 구할 수 있다.
var parentElement = document.getElementById("thelist");
var lis = parentElement.getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
if(i%2 == 0){
lis[i].setAttribute("style", "background-color:#eeffee");
// IE7
// lis[i].style.backgroundColor = "#eeffee";
}
}
:nth-child() 가상 클래스는 대부분의 브라우저에서 지원하지만 IE8은 지원하지 않는다. 이런 경우 해결의 세번째 방식을 사용하면 된다.
해결에서는 나머지 연산을 사용하여 홀수 요소에 접근했는데, 만약 짝수 요소에 접근하려면 다음과 같이 작성하면 된다.
if((i+1)%2){
...
}
스타일 속성을 setAttribute 메서드와 함께 사용했는데, 이는 IE7에서는 작동하지 않는다. IE7을 위한 우회 방법은 다음과 같다.
// IE7
lis[i].style.backgroundColor = "#eeffee";