プログラミングと旅と映画の日々

普段はスマホ決済サービスのバッグエンドを担当しているエンジニアです。プログラミングと趣味の映画、株、時々うどんに関してブログを書いていこうと思います。海外ドラマ、クロスバイクも好きです。

classListとclassNameを使用してclass属性を操作するには<JavaScript勉強中>

HTML5から利用できるようになったclassList、classNameを利用することで

HTMLのclass属性を操作できます!

 

便利なので使い方を覚えて取り入れましょう!

 

◆classList

element.classListで要素に紐付いたclass属性を取得できます。

主に以下のようなメソッドがあります。

  • add: 要素のクラスリストへのクラスの追加
  • remove: 要素のクラスリストからのクラスの削除
  • toggle: 要素のクラスリスト中の特定のクラスの切替
  • contains: 要素のクラスリストが特定のクラスを含むか否かの確認

では実際にそれぞれ使ってみます。(以下編集中)