.classList

JavaScriptの.classListを使ったclassの削除や追加

classの削除

.classList で、要素のclassを削除したり、追加したりすることが可能です。

.classList

.classListで、classを操作します。

内容メソッド
classの削除.classList.remove(“hoge”);
classの追加.classList.add(“hoge”);
classの追加と削除の交互の切り替え.classList.toggle(“hoge”);
classの置換 ※例はhogeをfugafugaに置換.classList.replace(“hoge”, “fugafuga”);

複数classを指定する場合。例えばaddで追加する場合、.classList.add("hoge", "fuga", "hogehoge"); のようにカンマ区切りで複数してすることができます。

.classList.toggle()を使ったサンプル

以下は.classList.toggle() で要素の削除を行うサンプルです。toggleなので、ボタンをクリックすることで、classの削除・追加が交互に行われます。

ボタンでclassが削除される要素

赤のテキストでは、指定したclassがついている状態。黒のテキストの場合はclassが削除されている状態です。

.classList.toggle()を使ったコード

それでは、上記サンプルのHTMLを見てみましょう。

<p id="deleteconpo" class="deleteclass">ボタンでclassが削除される要素</p>
<button id="deleteBtn1">idが#deleteBtn1のボタン</button>

このように、HTMLでは p タグと button タグのシンプルな構成です。

そして、以下が対象のJavaScriptです。

document.querySelector('#deleteBtn1').addEventListener('click', () => {   
  document.getElementById("deleteconpo").classList.toggle("deleteclass")   
});

順に使われている語句を説明していくと、まずquerySelectordeleteBtn1 を、addEventListener でクリック条件を設定します。

そして、ボタンをクリックするとgetElementByIddeleteconpo のidがついている要素を対象にして、deleteclassclassがついている場合は削除classがついていない場合は追加します。