IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

自作Webアプリ「IT勉強会用 名刺ジェネレーター」を公開しました!ぜひご活用ください😀

https://it-benkyoukai-meishi.herokuapp.com/

JavaScript の ClassList プロパティを使ってみる

はじめに

ここでは以下の動画を参考にして ClassList プロパティを使ってみることにする。

 

使ってみる

f:id:matt-note:20190319004023p:plain

f:id:matt-note:20190319002849p:plain

-> classList の add メソッドによって、要素に class を追加することができた。

 

add メソッドの説明は以下の通り。引数に文字列を指定することで、要素の class の値を設定できる。文字列を複数指定した場合は、class の値を複数指定できる。

f:id:matt-note:20190319002955p:plain

 

f:id:matt-note:20190319003830p:plain

f:id:matt-note:20190319003902p:plain

 

removeメソッドで class の値を削除してみる。

f:id:matt-note:20190319004054p:plain

f:id:matt-note:20190319004120p:plain

-> class の値から bold を削除して、big-font だけが残った。

 

toggle メソッドを使ってみる。CSS でスタイルを記述しておいて、指定した要素がクリックされたら、class の値に bg-red を追加して削除してといったことができる。

f:id:matt-note:20190319010020p:plain

f:id:matt-note:20190319010028p:plain

f:id:matt-note:20190319010244g:plain

-> toggle メソッドは、イベントと組み合わせると class の値の追加と削除を切り替える操作を記述できる。toggle メソッドは classLIst.toggle('hoge') のようにして使用する。