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

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // "bg-red" 클래스 값이 있으면 추가, 없으면 제거하기
    elem.classList.toggle("bg-red");
});
실제 적용된 모습 "배경색 추가하기/제거하기" 버튼을 클릭해 보세요!
<style>
    .bg-red {
        background-color: red;
    }
</style>
<input type="text">
<button type="button">배경색 추가하기/제거하기</button>
<p style="color: red;">
    "bg-red" 클래스 값이 추가되었는지 제거되었는지가 표시됩니다.
</p>
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" 클래스 값이 제거되었습니다.';
    }
});
실제 적용된 모습 "배경색 추가하기/제거하기" 버튼을 클릭해 보세요!
<style>
    .bg-red {
        background-color: red;
    }
</style>
<ol>
    <li>리스트 아이템</li>
    <li>리스트 아이템</li>
    <li>리스트 아이템</li>
    <li>리스트 아이템</li>
    <li>리스트 아이템</li>
</ol>
<button type="button">짝수에 배경색 추가하기</button>
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" 클래스 값이 강제로 추가됨
        */
    }
});
실제 적용된 모습 "짝수에 배경색 추가하기" 버튼을 클릭해 보세요!