【classList】HTMLでCSSクラスの追加・削除する方法

code

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の学習講座、エンジニアの転職

あわせて読みたい記事

あわせて読みたい書籍

コメントを残す

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

CAPTCHA