JavaScriptでクラスを管理する「classList」

サンプルコード

クリックでクラスをトグルさせる

<button class="base_class_01">クリックでクラスをつけたり外したりする</button>
<script>
    const toggleClass = document.querySelector('.base_class_01');

    // クリックでクラスがトグルする
    toggleClass.addEventListener('click', ()=>{
        toggleClass.classList.toggle('toggleClass');
    });
</script>

クリックでクラスを付与する

<button class="base_class_02">クリックでクラスを付与する</button>
<script>
    const addClass = document.querySelector('.base_class_02');
    // クリックでクラスを追加する
    addClass.addEventListener('click', ()=>{
        addClass.classList.add('addClass');
    });
</script>

クリックでクラスを削除する

<button class="base_class_03 deleteClass">クリックでクラス(deleteClass)を削除する</button>
<script>
    const deleteClass = document.querySelector('.base_class_03');
    // クリックでクラス(deleteClass)を削除する
    deleteClass.addEventListener('click', ()=>{
        deleteClass.classList.remove('deleteClass');
    });
</script>

クラス（containsClass）が付与されているかを確認する

<button class="base_class_04 containsClass">含まれている</button>
<button class="base_class_04">含まれていない</button>
<script>
    const containsClass = document.querySelectorAll('.base_class_04');
    // クリックしたボタンにクラス（containsClass）が付与されているかを確認する
    for (let i =0; i < containsClass.length; i++) {
        containsClass[i].addEventListener('click', ()=>{
            if (containsClass[i].classList.contains('containsClass')) {
                alert('yes'); // 含まれていれば「yes」
            } else {
                alert('no'); // 含まれていなければ「no」
            }
      });
    }
</script>