반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
display: flex;
}
li {
/* display: inline-block; */
list-style-type: none;
margin: 5px;
}
</style>
</head>
<body>
<ul>
<li>첫번째ㅋㅋㅋ</li>
<li>두번째ㅎㅎㅎ</li>
<li>세번째ㅍㅍㅍ</li>
<li>네번째...</li>
<li>다섯번째;;;</li>
</ul>
</body>
</html>
<script>
// DOM -> Document Object Model
let list = document.getElementsByTagName('li');
console.log(list);
for(let i=0; i<list.length; i++) {
if (i % 2 == 0) {
list.item(i).style.backgroundColor = 'gray';
} else {
list.item(i).style.backgroundColor = 'skyblue';
}
//
}
</script> let item = document.getElementById("test");
item.style.color = 'skyblue';
let item2 = document.getElementsByClassName("test2");
for (let i=0; i<item2.length; i++) {
item2[i].style.color = "pink";
}반응형
'Java Script' 카테고리의 다른 글
| [JS] INSERT (0) | 2023.04.13 |
|---|---|
| [JS] media 쿼리 / 화면 사이즈에 따라 카드 구성 다르게 하기 (0) | 2023.04.13 |
| [JS] eventListener (0) | 2023.04.12 |
| [JS] 버튼클릭>함수호출>색 변경 (0) | 2023.04.12 |
| [JS] 초단위로 시간 변경 #setInterval (0) | 2023.04.12 |