HTML/CSSで特定の要素のクラス名を追加、削除、参照するなど便利な【classListプロパティ】についてです。
目次
classListとは？
elem.classList
classListとは、指定した要素のclass属性をリストで返すプロパティ。
class属性の「追加」「削除」「切り替え」や、「classがすでに設定されているか？」など、調べることができます。
主なclassListのメソッド
classListはプロパティですが、メソッドを使うことでクラス操作ができます。
| メソッド | 説明 |
|---|---|
| add | クラスを追加 |
| remove | クラスを削除 |
| contains | クラスが含まれているか確認 |
| toggle | クラスが含まれていれば削除、含まれていなければ追加 |
構文
const elementClasses = elementNodeReference.classList;返値
その要素の”class属性”を返します。
class属性が設定されていない場合や空の場合は、空の DOMTokenList を返します。
参考）MDN
https://developer.mozilla.org/ja/docs/Web/API/Element/classList
JavaScriptサンプル
toggle メソッドを使って、CSSのクラスを切り替えるサンプルです。
See the Pen classList by uxbear (@uxbear) on CodePen.
指定したid値を持つ要素をElementオブジェクトとして返すメソッド getElementByIdについてはこちらの記事を参考ください。
まとめ
HTML/CSSで特定の要素のクラス名を追加、削除、参照するなど便利な classListプロパティについてでした。
JavaScriptの学習講座、エンジニアの転職
あわせて読みたい記事
あわせて読みたい書籍
リンク
リンク
