こんにちは、ユアサです。
前回まではCSSの内容の記事が多かったですが、社内での勉強会でもJSの内容に入ってきたので、今回は勉強会でも習ったclassListについて復習の意味も込めて書きまとめていきます。
classListについて
classListは、特定の要素のクラス名を追加・削除をしたり、参照することができるプロパティです。
classListの後にメソッドを定義することにより、追加・削除、参照の機能を設定できます。classListのメソッドは以下の通りです。
- classList.add：クラスを追加
- classList.remove：クラスを削除
- classList.contains：クラスが含まれているか確認
- classList.toggle：クラスを確認して含まれていれば削除、含まれていなければ追加
また当然ですが、追加するためのclass属性をあらかじめ準備する必要があります。
使用例
OFF・ONのスイッチを押すことによって表示を切り替えるものを作ってみました。
See the Pen switch ON/OFF by felly (@felly00505) on CodePen.
CSSでis-shutという名前のclass属性に表示を消すためのdisplay:noneが指定されています。HTMLの方ではp要素でOFFとONの両方があり、初期状態ではONの方にis-shutが設定されているのでOFFのみ表示されています。
このOFFを一回クリックするとJSが働き、classList.containsでOFF自体にis-shutが含まれているか確認されます。最初のクリックでは値はfalseなので、OFFにis-shutを追加してONのis-shutを削除され、OFFの表示が消えて今度はONが表示されるといった流れです。
今度はONをクリックすると上記の逆の動作が働きます。
See the Pen switch ON/OFF toggle by felly (@felly00505) on CodePen.
こちらはclassList.toggleを使用したパターンです。classList.toggleでis-shutが含まれているか確認し、trueなら削除、falseなら追加します。
classList.addとclassList.removeを切り替えるといった機能を実装したい場合は、classList.toggleを使用するとコードがよりスッキリしますね。
まとめ
今回は社内の勉強会で習ったJSのclassListを使って簡単な表示切り替えができるものを作りました。
結構初歩的なものだったと思うので、次回ではclassListを応用してカルーセルのようなものを作ってみようと思います。
今回も最後まで読んでいただきありがとうございました（^人^）
