JavaScriptでElementのクラスを変更する
特定のElementに対してJavaScriptを使ってクラス属性を追加したり、削除する方法です。
classNameプロパティで変更する
ElementのプロパティclassNameを変更します。
単一のクラスを指定
document.getElementById(id).className = 'bg-info';複数のクラスを指定
クラス名をスペースで区切って設定します。
document.getElementById(id).className = 'bg-info text-white';クラスを全て削除する
空の文字列を設定します。
document.getElementById(id).className = '';classListでクラスを追加する
classListのadd()メソッドを使ってクラスを追加します。
単一
document.getElementById(id).classList.add('bg-info');複数のクラスを追加
追加するクラスのリストをカンマで区切って渡します。
document.getElementById(id).classList.add('bg-info', 'text-white');classListでクラスを削除する
classListのremove()メソッドを使って削除するクラスを削除します。
document.getElementById(id).classList.remove('bg-info');複数のクラスを削除
削除するクラスのリストをカンマで区切って渡します。
document.getElementById(id).classList.remove('bg-info', 'text-white');トグル処理
toggle()メソッドは指定したクラスが設定されていれば削除、なければ追加します。
document.getElementById(id).classList.toggle('bg-info');クラスが設定されているか確認する
contains()メソッドは指定したクラスが設定されている場合にtrueを返します。
document.getElementById(id).classList.contains('bg-info')
