JavaScriptのclassListは全部で6つ

  • 投稿日
  • 更新日
  • 著者 アバター しんぺー
  • カテゴリー JavaScript

JavaScriptのclassListで古いクラスから新しいクラスに変えるのなんだっけ？
古い方先に書くんだっけ？
たしかJavaScriptの書籍に書いて。。。ない。
前調べたけど簡単だからって油断してメモも残してない。。

これ、昨日の自分です。
また調べなくていいようにメモ残しておきます。

昨日の自分に届け〜classList.replace(oldClass, newClass)

classListのプロパティは全部で6つです

classList.add(class1, class2)
classList.remove(class1, class2)
classList.toggle(class, force)
classList.contains(class)
classList.item(index)

.add(class1, class2)クラスを追加。
.remove(class1, class2)クラスを削除。
.toggle(class, force)クラスを切り替え。forceは省略可。
forceにはtrueかfalseを入れます。
true=指定したクラスを強制的に追加。
false=指定したクラスを強制的に削除。
.contains(class)指定したクラスがあればtrueを、なければfalseを返します。
.item(index)indexに対応したクラスを取得。
複数要素の0番目、1番目…のように、特定の要素を取得できます。
.replace(oldClass, newClass)指定したクラスを、別のクラスに置き換えます。

jQueryとの対応表

ついでにjQueryとの対応表もメモに残します。

JavaScriptjQuery機能
.add(class1, class2)addClass(class1, class2)追加
.remove(class1, class2)removeClass(class1, class2)削除
.toggle(class, force)toggleClass(class, force)切り替え
.contains(class)hasClass(class)指定したクラスの有無
.item(index)なし。特定要素を取得
.replace(oldClass, newClass)なし。
addとremoveで対応。		置き換え

最後に

今回はちょっとしたメモですが、早見表のように一覧で見れるものが見つからなかったので記事にしました。
ChatGPTもすぐに教えてくれますが毎回こちらが質問する必要があります。
気を利かせてユーザーの潜在的なニーズにも回答してくれると嬉しいのですが、、、
無言でスクロールしてるだけの方が楽です。

最後まで読んでいただきありがとうございます。この記事が少しでもあなたの助けになっていれば幸いです。

jQuery