このエントリーをはてなブックマークに追加

classListを使ってクラスの追加と削除をする

JavaScriptでクラスの追加削除をする時、今まではjQueryならaddClass()、生で書く時はclassName()で追加と削除をしていましたが便利なclassListというのがあるみたいです、IE10以上なら大体動きます。

追加や削除が容易にできる他、クラスの切り替え(toggle)や特定のクラスを含むかどうか判定できるhasClassっぽいことも出来ます。

 

  • add: クラスの追加、jQueryでいうところのaddClass()
  • remove: クラスの削除、jQueryでいうところのremoveClass()
  • toggle: クラスの切替、jQueryでいうところのtoggleClass()
  • contains: 特定のクラスを含むか否かの確認、jQueryでいうところのhasClass()

「.header__logo」が「.header__logo–loaded」を含むかどうか判定するサンプル

 

https://developer.mozilla.org/ja/docs/Web/API/Element/classList

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です