Element:className / Element:classList

（Web API ＞ Element）

Element:className

Element: classList プロパティ - Web API | MDN
...
developer.mozilla.org

classNameプロパティは、要素のclass属性にアクセスすることができる。また、新たにクラスを割り当てることもできる。その場合既存のすべてのクラスを新しいクラスに置き換える。
クラスリストを確認したい場合やクラス全体を置き換えたい場合にはclassNameプロパティは便利だが、多くの場合は1つのクラスの追加や削除が必要となる。
それを解決してくれるのがclassListプロパティである。

<body class="main box">
  <script>
    console.log(document.body.className = 'message'); // クラス名がmessageに置き換わる
  </script>
</body>

Element:classList

Element: classList プロパティ - Web API | MDN
...
developer.mozilla.org

classListプロパティは、特定の要素のclass属性のリストを返す。返されるリスト自体は読み取り専用だが、classListプロパティは以下の特別なメソッドを持っており、これらによってクラスの変更を行うことができる。

  • classList.add()：クラスの追加。引数には追加したいクラス名を指定する（置き換えではないので、既存のクラスは残る）
  • classList.remove()：クラスの削除。引数には削除したいクラス名を指定する
  • classList.toggle()：クラスの切り替え。クラスが存在する場合はそのクラスを削除しfalseを返す。反対に、クラスが存在しない場合はクラスを追加してtrueを返す
  • classList.contains()：クラスの有無の確認。クラスが存在すればtrueを返し、存在しなければfalseを返す
  • classList.replace()：クラスの置き換え。第一引数には削除したい既存のクラス名を指定し、第二引数には置き換えたい新しいクラス名を指定する
  • classList.length()：クラスの数を取得する
  • classList.value()：クラス属性に指定されている文字列を取得する
inserted by FC2 system