クラス属性を簡単に扱うためのclassListについて見ていきます。
- classList.add()
- classList.remove()
- classList.contains()
- classList.toggle()
classList.add()
・クラス属性の操作にはclassListというプロパティを使ってあげるのが一般的です。
・ classList.add('my_color') としてあげれば、既存のクラスの設定に my_color を新しく追加してくれるので、わざわざ my_borderを書く必要はありません。
classList.remove()
・ classList.remove() を使ってあげます。
・条件分岐で条件を外したい場合に使うことが出来ます。
classList.contains()
・classList を使えば、ある要素に特定のクラスが付いているかどうか調べることもできます。
・クラスが付いてるかどうかを true 、 false で返してくれるので、条件分岐を使って my-color が付いていたら外すという処理を書くことが出来ます。
・my-color クラスが付いてなかったら付ける、という処理も else につないで書いてあげます。クラスを付けるには、 add() を使えば OK で外すにはremove()を使います。
classList.toggle()
・こういったつけたり外したりする処理はよく使うのでかんたんに書くことができる命令があります。
・ targetNode に対して classList.toggle('my-color') としてあげると、上と全く同じ意味になります。
・クラスの操作には前回見た className よりも classList を使ったほうが便利なので、使いこなせるようになりましょう。