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 |
