Element.classList.toggle() 사용법

classList.toggle()은
DOM 요소에 지정한 클래스 값이 없으면 추가하고, 있으면 제거합니다.
해당 클래스 값을 추가할 경우에는 true를 반환하고, 제거할 경우에는 false를 반환합니다.

일러두기
엄밀히 말하자면, class 속성의 값이 없으면 추가하고, 있으면 제거하는 것이 아니라 class 속성의 값인 '클래스 이름 목록에서 클래스 이름이 포함되어 있지 않으면 클래스 이름을 추가하고, 클래스 이름이 포함되어 있으면 클래스 이름을 제거한다'라고해야 합니다. class 속성은 해당 요소에 하나 이상의 클래스 이름을 지정하는 속성으로, class 속성에는 띄어쓰기로 여러 개의 클래스 이름을 가질 수 있는 클래스 이름 목록을 값으로 가집니다. classList.toggle()은 해당 요소의 클래스 속성의 값인 '클래스 이름 목록에서 클래스 이름이 포함되어 있지 않으면 클래스 이름을 추가하고, 클래스 이름이 포함되어 있으면 클래스 이름을 제거한다'라고 해야 하지만, 관행상 여기에서는 '클래스 값이 없으면 추가하고, 있으면 제거한다'라고 표기하겠습니다.

HTML class 속성

구문

JavaScript 
element.classList.toggle(className[, force])

toggle() 함수는 classList 객체의 메서드입니다.

매개변수

classList.toggle()의 매개변수
className 필수. 요소에 지정하려는 클래스 값(문자열 형식)입니다.
force 옵션. true 또는 false 값을 가질 수 있습니다.
  • true로 평가되면 지정한 클래스 값이 해당 요소에 있거나 없거나 상관없이 강제로 추가합니다.
  • false로 평가되면 지정한 클래스 값이 해당 요소에 있거나 없거나 상관없이 강제로 제거합니다.

반환 값

  • 지정한 클래스 값을 추가할 경우에는 false를 반환하고,
  • 제거할 경우에는 true를 반환합니다.

예제

세 가지 예제를 통해서 classList.toggle()을 사용하는 방법에 대해 알아보겠습니다.

일반적인 사용법

다음은 "배경색 추가하기/제거하기" 버튼을 클릭하면,
<p> 요소에 지정한 클래스 값을 추가하거나 제거함으로써, <p> 요소에 배경색을 추가하거나 제거하는 예제입니다.

HTML 
<style>
    .bold {
        font-weight: 600;
    }
    .bg-red {
        background-color: red;
    }
</style>
<p class="bold">배경색이 추가되거나 제거됩니다.</p>
<button type="button">배경색 추가하기/제거하기</button>
JavaScript 
const elem = document.querySelector("p");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // "bg-red" 클래스 값이 있으면 추가, 없으면 제거하기
    elem.classList.toggle("bg-red");
});

코드 부연설명
querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

classList.toggle()로 <p> 요소에 "bg-red" 클래스 값이 추가되면 빨간색 배경색이 추가되고, 제거되면 배경색이 제거됩니다.

실제 적용된 모습 "배경색 추가하기/제거하기" 버튼을 클릭해 보세요!

반환 값을 이용한 사용법

classList.toggle()의 반환 값을 사용하는 예제입니다.
지정한 클래스 값을 추가할 경우에는 true를 반환하고, 제거할 경우에는 false를 반환합니다.

다음은 "배경색 추가하기/제거하기" 버튼을 클릭하면,
<input> 요소에 지정한 클래스 값을 추가하거나 제거함으로써, <input> 요소에 배경색을 추가하거나 제거하는 예제입니다.

이때 "배경색 추가하기/제거하기" 버튼을 클릭하면 <p> 요소에는 <input> 요소에 "bg-red" 클래스 값을 추가했는지, 아니면 제거했는지가 표시됩니다.

HTML 
<style>
    .bg-red {
        background-color: red;
    }
</style>
<input type="text">
<button type="button">배경색 추가하기/제거하기</button>
<p style="color: red;">
    "bg-red" 클래스 값이 추가되었는지 제거되었는지가 표시됩니다.
</p>
JavaScript 
const inputElem = document.querySelector("input");
const button = document.querySelector("button");
const msgElem = document.querySelector("p");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    if (inputElem.classList.toggle("bg-red")) { // "bg-red" 클래스 값을 추가하면
        msgElem.textContent = '"bg-red" 클래스 값이 추가되었습니다.';
    } else { // "bg-red" 클래스 값을 제거하면
        msgElem.textContent = '"bg-red" 클래스 값이 제거되었습니다.';
    }
});

"bg-red" 클래스 값을 추가할 경우에는 true를 반환하고, 제거할 경우에는 false를 반환합니다.

실제 적용된 모습 "배경색 추가하기/제거하기" 버튼을 클릭해 보세요!

두 번째 매개변수(force)를 이용한 사용법

classList.toggle()의 두 번째 매개변수(force)는 옵션(선택사항)으로, true 또는 false로 평가되는 값을 가질 수 있습니다.

  • true로 평가되면 지정한 클래스 값이 해당 요소에 있거나 없거나 상관없이 강제로 추가합니다.
  • false로 평가되면 지정한 클래스 값이 해당 요소에 있거나 없거나 상관없이 강제로 제거합니다.

다음은 "짝수에 배경색 추가하기"버튼을 클릭하면 순서가 있는 리스트의 아이템인 <li> 요소들 중에서 짝수 번째만 "bg-red" 클래스 값이 추가되는 예제입니다.

HTML 
<style>
    .bg-red {
        background-color: red;
    }
</style>
<ol>
    <li>리스트 아이템</li>
    <li>리스트 아이템</li>
    <li>리스트 아이템</li>
    <li>리스트 아이템</li>
    <li>리스트 아이템</li>
</ol>
<button type="button">짝수에 배경색 추가하기</button>
JavaScript 
const items = document.querySelectorAll("li");
const button = document.querySelector("button");
const itemsLength = items.length;

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    for (let i = 0; i < itemsLength; i++ ) {
        items[i].classList.toggle("bg-red", i % 2 === 1);
        /*  i % 2 === 1
            : 짝수는 true, 홀수는 false로 평가 됨
            : 짝수는 "bg-red" 클래스 값이 강제로 추가됨
        */
    }
});
querySelectorAll() 함수

예제에서 두 번째 매개변수(i % 2 === 1)가 true로 평가되면 지정한 클래스 값인 "bg-red" 클래스 값이 추가됩니다.

실제 적용된 모습 "짝수에 배경색 추가하기" 버튼을 클릭해 보세요!

브라우저 호환성

classList.toggle()의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
classList.toggle() 24 12 24 7

명세서

classList.toggle()의 명세서 사양
명세서 사양
classList.toggle() DOM Standard
#ref-for-dom-domtokenlist-toggle①

참고문헌

같이 보기