JavaScriptのclassListでクラスの追加・削除・判定方法!

JavaScriptのclassListでは該当要素のクラス名の取得・追加・更新・削除を行うことが出来ます。classListの使い方についてサンプルコード付きで解説します。

コンテンツ [表示]

  1. 1classListとは?
  2. 2JavaScriptのclassListの使い方
  3. 2.1要素のclass属性の値を取得する
  4. 2.2class属性の値を追加する
  5. 2.3class属性の値を削除する
  6. 2.4クラス名が含まれているか確認する
  7. 2.5指定したクラス名をtoggleする
  8. 3まとめ

classListとは?

ブラウザ上で実行したJavaScriptで得られるclassList(Element.classList)は該当要素のclass属性の情報が格納された読み取り専用のプロパティです。

このclassListを使うことで、要素のclass属性の情報を取得したり、任意のクラス名を追加・削除する事が出来ます。

今回はclassListの使い方についてサンプルコード付きで解説します。

Photo byjamesmarkosborne

JavaScriptのclassListの使い方

要素のclass属性の値を取得する

ではまずclassListを使ったclass属性の値の取得方法からです。下記のサンプルコードを見てみましょう。

上記のサンプルコードでは要素をdocument.getElementByIdで取得し、classListを取得して表側に表示させています。

結果各要素に設定されているclass属性の値が表示されています。

console.logの結果

ちなみに上記のサンプルコードではconsole.logでclassListの値を出力していますが、このようにDOMTokenListとして配列の中にclass属性の値が格納されて渡ってきています

配列として渡ってきているので、class属性の1つ1つを取得して利用しやすいですし、まとめて利用したい場合はそのvalueを参照すればいいのでとても扱いやすくまとまっています。
 

class属性の値を追加する

続いてclassListでclass属性の値を追加する方法です。下記のサンプルコードを見てみましょう。

こちらのサンプルコードでは取得できたclassListに対して

クラスを追加しているコード

// クラスを追加
classes.add('big');

の部分で、bigというクラスを追加しています。このようにclassListに対してadd()でクラスを追加することが出来ます。

また複数のクラスを一気に追加したい場合は下記のように、add()に追加したいクラス分だけ引数を追加しましょう。

class属性の値を削除する

classListでクラスを削除するにはremove()を使います。下記のサンプルコードを見てみましょう。

classListに対してのremove('big')により、bigクラスが該当要素から削除されています。また複数のクラスを一気に削除したい場合は下記のように削除したい対象分だけ引数を追加しましょう。

クラス名が含まれているか確認する

classListのcontains()によって指定したクラス名が該当要素ですでに設定されているかどうかを確認することが出来ます。下記のサンプルコードを見てみましょう。

上記のサンプルコードではclassListのcontains()を使い、引数で指定したクラス名が該当要素に含まれているかどうかを確認しています。引数は複数指定することができ、一方でも含まれていればtrueが返ります。

指定したクラス名をtoggleする

指定したクラス名があれば削除、無ければ追加したい場合(つまりtoggle)は下記のようにtoggle()を利用しましょう。

上記のサンプルコードではclassListのtoggle()により引数で指定したクラス名がclass属性にすでにあれば削除、無ければ追加というtoggleの処理を実現しています。

まとめ

これまで見てきたように、JavaScriptのclassListでは要素のクラスの操作(取得、追加、削除、toggleによる更新、containsによる含まれているかの確認)で便利なメソッドが揃っています。

それこそjQueryを読み込まなくても今回解説してきた操作は行えます。ぜひclasListを活用してみて下さい。

GeekHive採用サイト

関連記事