HTML5で追加されたclassList

jqueryのaddclassやremoveclassのようなことがHTML5で追加されたclassList APIを使ってJavaScriptだけで出来るようになった。忘れないよう備忘録しておく。 classList APIの機能は次のとおり。

機能 内容
add(); クラスを追加
remove(); クラスを削除
toggle(); classを追加&削除(切り替え)
contains(); classを判定

サンプル

  • クラスの追加
     要素にhogeクラスを追加する hogeEl.classList.add(‘hoge’);
  • クラスの削除
     要素からhogeクラスを削除する hogeEl.classList.remove(‘hoge’);
  • クラスの切り替え
     要素にhogeクラスがなければ追加し、あれば削除する hogeEl.classList.toggle(‘hoge’);
  • クラスの確認
     要素にhogeクラスがあればtrueを返し、なければfalseを返す hogeEl.classList.contains(‘hoge’);