2024/12/03 (更新日:2024/12/03)

【JavaScript】要素のクラス属性の値を操作する方法！【className, classList, add(), remove(), contains(), toggle()】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

こんにちは！今回は「JavaScript」を使って「HTML要素のクラス属性の値」を「操作する方法」について解説します。「クラス属性の値」の操作をすることで予め用意しておいたスタイルを簡単に適用することができ、動的なwebサイトを作ることができます。

この記事では以下の内容を扱います。

この記事の内容！

Element.className を使ったクラスの操作
Element.classList を使ったクラスの操作
add()
remove()
contains()
toggle()

また、下の動画でも「JavaScript」で「要素のクラス属性の値を操作する方法」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

そもそも「クラス属性」って何？

HTMLの要素にはclass属性があり、CSSでスタイルを適用するためのラベルのような役割を持ちます。例えば以下のように使います。

<div class="box"></div>

このように、boxというクラスを付与することで、CSSファイルに書いたスタイルを要素に適用することが可能です。

「JavaScript」から「クラス属性の値」を操作する方法にはどんなものがあるのか？

「JavaScript」から「クラス属性の値」を操作する方法には下記があります。

Element.className
Element.classList

この記事ではこの２つの方法を扱います。

「Element.classList.add()」などがある「Element.classList」がよく使われる方法ですかね。見たこともあると思います。

「Element.className」でクラスを取得・設定する

// 要素を取得
const element = document.querySelector('.box');

// 現在のクラス名を取得
console.log(element.className); // "box"

// クラス名を変更
element.className = 'new-class';
console.log(element.className); // "new-class"

このように「Element.className」を使うことで、現在ついている「クラス属性の値」を取得したり、

再代入を行うことで、「クラス属性の値の変更」ができます。

既存のクラスがすべて上書きされる

<div class="box active">Hello World!</div>

<script>
  // 要素を取得
  const element = document.querySelector('.box');
  
  // 現在のクラス名を取得
  console.log(element.className); // "box active"
  
  // 新しいクラスを設定
  element.className = 'bg-pink';

  // 結果として、"box"と"active"が消え、新しいクラス"bg-pink"だけが設定される
  console.log(element.className); // "bg-pink"
</script>

classNameを直接変更すると、既存のクラスがすべて上書きされるため注意が必要です。

なので「bg-pink」というクラスを追加したい場合でも、既存のクラスである「box active bg-pink」のように結果的に存在してほしいクラス属性の値を全て書き込む必要があります。

上書き問題の解決方法！

// 要素を取得
const element = document.querySelector('.box');

// 既存のクラスを保持しつつ、新しいクラスを追加
element.className += ' bg-pink';

// クラス名は "box active bg-pink" になる
console.log(element.className); // "box active bg-pink"

このように「文字列の連結」を上手く使うことで、上書き問題を解決することができます。

「スペースもしっかり加えてあげることに注意してください。

もしくは、しっかり全て書くか、「Element.classList.add()」かですかね。

「Element.classList.add()」の使い方の解説ついては後述します！

特定のクラス属性の値を追加する場合は「classList」を使用するのがベストプラクティスです。

「Element.classList」で「クラス属性の値」を操作をする方法！

「Element.classList」で「クラス属性の値」を操作をする方法についてまとめます！

実際に使えるのは下記の命令です。

Element.classList.add()
Element.classList.remove()
Element.classList.contains()
Element.classList.toggle()

では、これらの使い方の詳細の解説をしますね！

「classList.add()」でクラスの追加

element.classList.add('bg-pink');
console.log(element.className); // "box bg-pink"

「classList.add()」で「クラスの追加」ができます。複数のクラスを一度に追加する場合は、カンマ区切りで第二引数,第三引数と増やせばOKです！

すでに存在するクラスを追加してもエラーにはなりません。

「classList.remove()」でクラスの消去

<div class="box bg-pink"></div>

element.classList.remove('box');
console.log(element.className); // "bg-pink"

「classList.remove()」で「指定したクラスを削除する」ことができます。複数のクラスを一度に削除する場合は、カンマ区切りで第二引数,第三引数と増やせばOKです！

指定したクラスが存在しない場合でもエラーは発生しません。

「classList.contains()」でクラスの存在を確認

<div class="box"></div>

console.log(element.classList.contains('box')); // true
console.log(element.classList.contains('bg-pink')); // false

「classList.contains()」で「クラスの存在」を確認することができます。

「true」か「false」が返ってくるので、それで条件分岐処理などに繋げることができますね。

「classList.toggle()」でクラスの付けは外し

button.addEventListener('click', () => {
  box.classList.toggle("bg-pink");
});

「classList.toggle()」を使うことで「クラスの付けは外し」ができます。

既にクラスがついていたら、そのクラスを削除し

クラスがついていなかったら、クラスを追加します。

これ便利だね！

参考リンク！

仕様書。
https://dom.spec.whatwg.org/#ref-for-dom-element-classlist%E2%91%A0

https://dom.spec.whatwg.org/#ref-for-dom-element-classname%E2%91%A0

MDN。
https://developer.mozilla.org/ja/docs/Web/API/Element/classList

https://developer.mozilla.org/ja/docs/Web/API/Element/className

まとめ！

HTMLの要素にはclass属性があり、CSSでスタイルを適用するためのラベルのような役割を持ちます。

「JavaScript」から「クラス属性の値」を操作する方法には下記があります。

Element.className
Element.classList

classNameはクラスを文字列で直接設定・取得する方法。

classListは、クラスの追加・削除・確認・切り替えを柔軟に行える便利なプロパティ。

「classList」で実際に使える命令には下記がある。

Element.classList.add()
Element.classList.remove()
Element.classList.contains()
Element.classList.toggle()

これらの操作を使いこなすことで、インタラクティブで魅力的なウェブサイトを作ることができます！

ぜひ、この記事を参考にして、実際にコードを書いてみてくださいね。

ではまたっ！