JavaScript でクラスを追加する方法
JavaScript で要素にクラスを追加するには、classList プロパティと add() メソッドを使用します。 classList は要素のクラス属性を表すオブジェクトであり、add() メソッドは指定したクラス名を要素に追加します。
基本的な使い方
要素にクラスを追加する基本的な構文は次のとおりです。
element.classList.add("className");
ここで、
* **element** はクラスを追加する対象の要素です。 * **"className"** は追加するクラス名です。例として、"box" という ID を持つ要素に "active" というクラスを追加してみましょう。
<div id="box"></div>
<script>
const box = document.getElementById("box");
box.classList.add("active");
</script>
このコードを実行すると、"box" 要素に "active" クラスが追加されます。
複数のクラスを追加する
add() メソッドには、複数のクラス名を引数として渡すことができます。例えば、"box" 要素に "active" と "highlight" の2つのクラスを追加するには、次のように記述します。
box.classList.add("active", "highlight");
クラスの有無を確認する
要素が特定のクラスを持っているかどうかを確認するには、classList プロパティと contains() メソッドを使用します。
if (box.classList.contains("active")) {
// "active" クラスを持っている場合の処理
} else {
// "active" クラスを持っていない場合の処理
}
クラスを削除する
クラスを削除するには、classList プロパティと remove() メソッドを使用します。
box.classList.remove("active");
クラスの付け替え
クラスの有無に応じてクラスを追加または削除するには、classList プロパティと toggle() メソッドを使用します。
box.classList.toggle("active");
このコードは、"box" 要素に "active" クラスがない場合は追加し、すでにある場合は削除します。
クラス属性を直接操作する場合の注意点
className プロパティを使用してクラス属性を直接操作することもできますが、この方法では既存のクラスが上書きされてしまう可能性があるため、注意が必要です。 classList プロパティを使用することで、既存のクラスを保持したまま、安全にクラスを追加、削除、付け替えを行うことができます。
classList メソッド一覧
classList オブジェクトで使用できる主なメソッドを以下の表にまとめます。
| メソッド | 説明 |
|---|---|
| add(className1, className2, ...) | 1つ以上のクラスを要素に追加します。 |
| remove(className1, className2, ...) | 1つ以上のクラスを要素から削除します。 |
| contains(className) | 要素が指定されたクラスを持っているかどうかを確認します。 |
| toggle(className) | 要素にクラスがない場合は追加し、すでにある場合は削除します。 |
参考資料
よくある質問
Q1. 複数のクラスを追加するにはどうすればよいですか？
A1. classList.add() メソッドに複数のクラス名を引数として渡すことで、複数のクラスを追加できます。例： element.classList.add("class1", "class2");
Q2. 特定のクラスが要素に存在するかどうかを確認するにはどうすればよいですか？
A2. classList.contains() メソッドを使用します。このメソッドは、要素が指定されたクラスを持っている場合は true、そうでない場合は false を返します。例： if (element.classList.contains("my-class")) { ... }
Q3. JavaScript でクラスを操作する利点は何ですか？
A3. JavaScript を使用してクラスを操作すると、ユーザーインタラクションやその他のイベントに基づいて、要素のスタイルや動作を動的に変更できます。これにより、よりインタラクティブで応答性の高い Web ページを作成できます。
その他の参考記事:JavaScript クラス