.classList
.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")
});順に使われている語句を説明していくと、まずquerySelector で deleteBtn1 を、addEventListener でクリック条件を設定します。
そして、ボタンをクリックするとgetElementById で deleteconpo のidがついている要素を対象にして、deleteclass のclassがついている場合は削除。classがついていない場合は追加します。
