JavaScript로 요소의 클래스를 전환(토글)하는 방법은 개발자라면 반드시 익혀야 할 가장 실용적인 기술 중 하나입니다. 클래스 토글은 메뉴 열기·닫기, 검색 필터 추가·제거, 소셜 미디어 버튼(좋아요, 추천 등) 구현 등 다양한 곳에서 활용됩니다.
토글 기능은 상황에 따라 다르지만, 몇 줄의 코드만으로도 충분히 구현할 수 있습니다. 이번 글에서는 클래스 토글뿐만 아니라 JavaScript 학습 전반에 도움이 되는 간단하고 확실한 방법을 알아보겠습니다.
HTML 구조 만들기
본격적으로 JavaScript로 기능을 구현하기 전에, 먼저 상호작용할 HTML 요소들을 준비하겠습니다. 감싸는 컨테이너(wrapper), 버튼(button), 박스(box) 세 가지 요소를 만들어 보겠습니다.
HTML 문서의 <body> 태그 안에 아래 코드를 넣어주세요.
<div class="wrapper">
<button class="button">Toggle</button>
<div class="box"></div>
</div>부모 div 요소(wrapper)는 자식 요소들인 박스와 버튼을 CSS로 가운데 정렬하기 위한 용도일 뿐입니다. 즉, 순수하게 화면 배치를 위한 것으로, 기능 동작에는 필수적이지 않습니다.
참고: CodePen 같은 온라인 코드 에디터를 사용한다면 위 코드를 HTML 탭에 붙여넣으면 됩니다. 에디터가 body 태그를 포함한 나머지 HTML 구조를 자동으로 처리해 주기 때문입니다.
CSS 스타일 적용하기
부모 div 요소에는 .wrapper 클래스가 적용되어 있으며, Flexbox 속성을 사용해 자식 요소인 박스와 버튼을 가운데 정렬합니다. Flexbox의 작동 원리에 대한 자세한 설명은 별도 튜토리얼에서 다루겠습니다.
버튼과 박스에는 외형을 꾸미기 위한 기본 스타일 클래스를 적용합니다.
.wrapper {
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
background-color: #eeeeee;
}
.button {
display: block;
text-align: center;
font-size: 1.5rem;
color: white;
background-color: #262422;
border-radius: 4px;
padding: 1rem 2rem;
margin-bottom: 1rem;
}
.bg-red {
background-color: #aa2f18;
}여기서 주목해야 할 부분은 .bg-red 클래스입니다. 이 클래스는 background-color 속성에 빨간색 계열의 값('#AA2F18')을 담고 있습니다. 바로 이 클래스를 버튼을 클릭할 때마다 박스 요소에 추가하거나 제거하는 것이 우리의 목표입니다.
JavaScript 이벤트 처리
1단계: 요소 참조 저장하기
JavaScript로 요소를 조작하려면 먼저 대상 요소들(박스와 버튼)에 대한 참조를 변수에 저장해야 합니다. 두 개의 변수 button과 box를 선언한 뒤, 각각 해당 요소를 할당하겠습니다.
요소를 선택할 때는 강력한 querySelector 메서드를 사용해 클래스명으로 요소를 가져옵니다.
let button = document.querySelector(".button");
let box = document.querySelector(".box");2단계: 클릭 이벤트 리스너 등록하기
이제 각 대상 요소에 대한 참조를 확보했으므로, 속성과 메서드에 접근해 DOM 조작을 할 수 있습니다. 여기서는 버튼 요소에서 클릭 이벤트(click event)를 감지하는 이벤트 리스너(event listener)를 사용합니다. 클릭이 감지되면 박스 요소의 배경색을 토글링(toggling)하는 함수(function)가 실행되도록 하겠습니다.
이를 위해 버튼 요소의 변수 참조에 addEventListener() 메서드를 연결합니다. 이 메서드에는 두 개의 매개변수 값을 전달하는데, 첫 번째는 이벤트 유형인 'click', 두 번째는 실행할 함수입니다. 이번 예제에서는 이름 없는 익명 함수(anonymous function)를 사용하겠습니다.
3단계: classList.toggle()로 클래스 전환하기
익명 함수 내부에서는 JavaScript classList 속성의 toggle() 메서드를 박스 요소에 연결합니다. toggle 메서드의 역할은 .bg-red 클래스를 추가하거나 제거하는 것입니다.
button.addEventListener("click", function() {
box.classList.toggle("bg-red");
});classList의 toggle 메서드는 다음과 같이 동작합니다. 지정한 클래스가 대상 요소에 이미 존재하면 해당 클래스를 제거하고, 존재하지 않으면 새로 추가합니다. 덕분에 버튼을 누를 때마다 박스의 배경색이 빨간색 ↔ 회색으로 전환되는 것을 확인할 수 있습니다.
마무리
완성되었습니다! 이제 순수 JavaScript(vanilla JS)만으로 특정 요소의 클래스를 토글하는 방법을 익히셨습니다. 이 튜토리얼의 전체 코드는 CodePen에서 확인할 수 있습니다.
이 코드는 IE10 이상을 포함한 모든 최신 브라우저와 호환되므로 안심하고 프로젝트에 적용할 수 있습니다.