javaScript/JS Examples
JavaScript 태그 접근해서 색상 변경하기
mooyou
2022. 3. 26. 15:30
728x90
300x250
SMALL
먼저 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.
728x90
반응형
LIST