classList
classList는 CSS의 클래스 목록에 접근하여 지정한 클래스를 추가, 제거 등의 기능을 할 수 있다. 인라인형식의 스타일의 경우 다른 디자인을 설정하기 어렵지만, 클래스를 통해 지정하는 경우에는 이벤트에 따라 클래스를 추가, 제거 하는 등의 기능을 통해 조율이 쉽다.
| 메서드 | 설명 |
| .length | 해당 요소의 클래스의 수를 반환한다. |
| .add() | 해당 요소의 클래스 이름을 추가한다. |
| .contains() | 해당 요소에 지정된 클래스 이름이 있는지 여부를 확인한다. (true / false) |
| .item(index) | 해당 요소에서 지정된 인덱스 번호로 클래스 이름을 반환한다. (0부터 시작) |
| .remove() | 해당 요소에서 하나 이상의 클래스 이름을 제거한다. |
| .toggle(클래스명, true|false) | 해당 요소의 클래스 추가/삭제를 전환한다. 두번째 파라미터는 클래스 존재여부에 관계없이 클래스를 추가 / 제거하도록 하는 강제하는 값이다. |
아래 예제는 #div1에 설정되어있는 .bc3를 제거하고, .bc1을 추가하고 그리고 .bc2을 추가 / 제거를 전환하는 toggle 메서드를 넣었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#div1 {
width: 200px;
height: 200px;
padding: 50px;
}
.bc1 {
background-color: lightcoral;
}
.bc2 {
background-color: lightblue;
}
.bc3 {
color: yellow;
}
</style>
</head>
<body>
<div id="div1" class="bc3">안녕하세요</div>
<script>
let div = document.querySelector("#div1");
div.classList.remove("bc3");
div.classList.add("bc1");
console.log(div.classList.length);
console.log(div.classList.contains("bc1"));
console.log(div.classList.item(0));
div.addEventListener("click", function () {
div.classList.toggle("bc2");
});
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript 프로토타입(prototype)과 생성자 함수 (0) | 2024.07.30 |
|---|---|
| JavaScript 콜백함수란? (0) | 2024.07.29 |
| JavaScript : sort()와 localeCompare()을 이용해 정렬해보자 (0) | 2024.07.29 |
| JavaScript의 특징: 스코프와 실행 컨텍스트 (0) | 2024.07.29 |
| JavaScript : DOM의 이벤트를 설정해보자 (0) | 2024.07.29 |
| JavaScript : DOM을 통해 input 값 받아오기 (0) | 2024.07.29 |
| JavaScript에서 this는 무엇을 가리키는걸까? (0) | 2024.07.29 |
| JavaScript : DOM을 통해 속성을 조작해보자 (0) | 2024.07.27 |