toggle() 메서드는 요소에 클래스를 추가하거나 삭제합니다. 만약 요소에 해당 클래스가 존재하지 않는다면 추가하고, 존재한다면 삭제를 하는 on/off 스위치와 유사한 역할을 합니다.
만약 toggle()이 없다면 이전 글에서 정리한 addEventListener()와 조건문을 활용해서 기능을 구현해야 합니다. toggle() 메서드를 활용함으로써 코드가 더 간결해집니다.
toggle() 메서드의 또 다른 장점은, 기존에 가지고 있는 클래스들을 유지할 수 있다는 것입니다. 만약 toggle() 을 사용하지 않고 어떤 요소에 새로운 클래스를 설정하면, 먼저 존재하던 클래스들이 사라지게 됩니다.
다음은 toggle() 메서드의 사용 예시입니다.
index.html 내용
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>toggle() Method</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>h1</h1>
<div id="info">Information</div>
<button onclick="changeColor()">Button</button>
<script src="app.js"></script>
</body>
</html>
style.css 내용
더보기
.styleRed {
color: red;
}
app.js 내용
더보기
let info = document.getElementById("info1")
function changeColor() {
info.classList.toggle("styleRed")
}
728x90
반응형
'Frontend > Javascript' 카테고리의 다른 글
| [JavaScript] <script> 태그의 위치 (0) | 2024.02.12 |
|---|---|
| [JavaScript] addEventListener() 메서드 (0) | 2024.02.02 |
| [JavaScript] console.dir() 메서드 (0) | 2024.01.31 |
| [JavaScript] getElement* 와 querySelector (0) | 2024.01.31 |
| [JavaScript] every(), some() 메서드 (0) | 2023.09.11 |
