JavaScript 태그 접근해서 색상 변경하기

 

먼저 html로 리스트를 만들어주고

 

html 

    <ul id="list1">
        <li>black</li>
        <li>black</li>
    </ul>


    <ul id="list2">
        <li>red</li>
        <li>red</li>
        <li>red</li>
    </ul>

list2 리스트의 li만 red로 색상 변경한다고 했을 경우

 

JavaScript

<script>
    window.onload = function() {
        var list = document.getElementById("list2"); // 먼저 #list2를 찾는다.
        var liList = list.getElementsByTagName("li"); // #list2 태그 중 li태그를 찾는다.

        for (var i = 0; i < liList.length; i++) { // li태그를 하나씩 접근해 글자색을 변경한다.
            var li = liList[i];
            li.style.color = "#f00";
        }
    }
</script>

위 와 같이 getElementById를 이용해서 list2아이디를 찾고

#list2에있는 li들을 찾아서 반복문으로 하나씩 접근하여 색상 변경

 

 

See the Pen tag 색상변경 by kim oya (@ttuttu) on CodePen.