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

食品の営業からSEに転職した文系エンジニアです。 青学卒➡︎神戸屋➡︎ワークスアプリケーションズ➡︎Yahoo! JAPAN プログラミングと趣味の株に関してブログを書いていこうと思います。

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

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

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

 

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

 

◆classList

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

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

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

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