웹 개발을 하다 보면 버튼을 클릭할 때마다 특정 요소에 클래스를 추가했다가 다시 제거하는 동작, 즉 '토글(toggle)' 기능이 필요한 경우가 자주 있습니다. 예를 들어 다크 모드 전환, 메뉴 열기/닫기, 아코디언 펼치기 같은 UI 인터랙션이 대표적입니다.
JavaScript에서는 classList.toggle() 메서드 하나만으로 이 기능을 손쉽게 구현할 수 있습니다. 이 메서드는 해당 클래스가 요소에 없으면 추가하고, 이미 있으면 제거해 주기 때문에 별도의 조건문 없이 깔끔한 코드를 작성할 수 있습니다.
예제 코드
아래 예제는 버튼을 클릭할 때마다 DIV 요소에 스타일 클래스가 적용되었다가 해제되는 토글 기능을 구현한 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.newStyle {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
width: 100%;
padding: 25px;
background-color: rgb(147, 80, 255);
color: white;
font-size: 25px;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<h1>JavaScript로 className 추가하기 예제</h1>
<button class="btn">여기를 클릭하세요</button>
<h2>위 버튼을 클릭하면 아래 div에 className이 적용됩니다</h2>
<div id="sampleDiv">
이것은 DIV 요소입니다.
</div>
<script>
document.querySelector(".btn").addEventListener("click", addClassName);
function addClassName() {
var element = document.getElementById("sampleDiv");
element.classList.toggle("newStyle");
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'여기를 클릭하세요' 버튼 클릭 후
버튼을 한 번 클릭하면 newStyle 클래스가 DIV 요소에 추가되어 보라색 배경과 흰색 텍스트 스타일이 적용됩니다.
핵심 포인트 정리
- classList.toggle(): 클래스가 존재하지 않으면 추가하고, 존재하면 제거하는 메서드입니다.
- addEventListener(): 버튼 클릭 이벤트를 감지하여 지정한 함수를 실행합니다.
- querySelector() / getElementById(): 각각 CSS 선택자와 ID를 기준으로 DOM 요소를 선택합니다.
이처럼 classList.toggle()을 활용하면 조건문 없이도 간결하게 클래스 토글 기능을 구현할 수 있으며, 코드 가독성과 유지보수성까지 함께 높일 수 있습니다.