JavaScript의 classList는 DOM 요소의 클래스를 조작하는 데 사용되는 속성입니다. 이 속성을 사용하면 요소에 대한 클래스 이름을 추가, 제거, 교체, 토글 할 수 있습니다.
사용법
classList에는 add(), remove(), toggle(), contains(), replace() 등의 다양한 메소드가 있습니다.
add(className): 클래스 이름을 추가합니다.
remove(className): 클래스 이름을 제거합니다.
toggle(className): 클래스 이름이 요소에 있는 경우 제거하고 없는 경우 추가합니다.
contains(className): 클래스 이름이 요소에 있는지 확인합니다.
replace(oldClassName, newClassName): 클래스 이름을 다른 이름으로 교체합니다.
이러한 메소드를 사용하면 JavaScript를 사용하여 요소의 클래스를 동적으로 변경할 수 있습니다. 이것은 CSS와 JavaScript를 결합하여 요소의 스타일을 더욱 유연하게 조작할 수 있도록 합니다.
classList를 사용하여 요소의 클래스를 변경하는 예시를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>classList Example</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<h1 id="title">Hello World</h1>
<button onclick="toggleClass()">Toggle Class</button>
<script>
function toggleClass() {
var title = document.getElementById("title");
title.classList.toggle("active");
}
</script>
</body>
</html>위의 예제에서는 버튼을 클릭하면 title 요소의 active 클래스가 토글됩니다. 이를 통해 요소의 스타일을 동적으로 변경할 수 있습니다.
'IT > javascript' 카테고리의 다른 글
| 자바스크립트 키보드 이벤트 사용법 (0) | 2023.04.15 |
|---|---|
| 자바스크립트 계층 이동하는 방법 (0) | 2023.04.14 |
| 자바스크립트 이벤트 핸들러 this (0) | 2023.04.14 |
| 자바스크립트 addEventListener (0) | 2023.04.14 |
| 자바스크립트 onclick (0) | 2023.04.14 |
댓글