JavaScriptで要素にクラスを追加するにはどうすればいいですか？

JavaScriptで要素にクラスを追加するにはどうすればいいですか？

Webページに動的な表現を追加する際に、JavaScriptを使って要素のスタイルを変更する場面は多くあります。その中でも、要素にクラスを追加する方法は頻繁に利用されます。この記事では、JavaScriptで要素にクラスを追加する方法について、`classList` インターフェースの `add` メソッドを中心に解説します。

classList.add() メソッド

`classList` は、要素のクラス属性を操作するためのプロパティです。`add()` メソッドを使うことで、要素に新しいクラスを追加することができます。

基本的な構文は以下の通りです。


element.classList.add("className");

ここで、

  • `element` はクラスを追加したい対象の要素です。`document.getElementById("id")` や `document.querySelector(".class")` などで取得できます。
  • `"className"` は追加したいクラス名です。文字列で指定します。

使用例

例えば、ボタンがクリックされたときに、特定の要素に "active" クラスを追加したい場合は、以下のように記述します。


<button id="myButton">ボタン</button>
<div id="targetElement">ターゲット要素</div>

<script>
  const button = document.getElementById("myButton");
  const targetElement = document.getElementById("targetElement");

  button.addEventListener("click", () => {
    targetElement.classList.add("active");
  });
</script>

上記コードでは、ボタンをクリックすると、`targetElement` に "active" クラスが追加されます。CSSで "active" クラスにスタイルを定義しておくことで、ボタンクリック時に要素の見た目を動的に変更することができます。

複数クラスの追加

`add()` メソッドは、引数に複数のクラス名を指定することで、一度に複数のクラスを追加することも可能です。


element.classList.add("className1", "className2", "className3");

既存クラスとの関係

既に要素にクラスが設定されている場合でも、`add()` メソッドを使うことでクラスを追加できます。この際、既存のクラスは削除されずに、新しいクラスが追加されます。

classList のその他のメソッド

`classList` には、`add()` メソッド以外にも、クラスを操作するための便利なメソッドが用意されています。主なものを以下の表にまとめます。

メソッド 説明
add(className1, className2, ...) 要素に1つ以上のクラスを追加します。
remove(className1, className2, ...) 要素から1つ以上のクラスを削除します。
toggle(className) 要素にクラスが存在する場合は削除し、存在しない場合は追加します。
contains(className) 要素が指定されたクラスを持っているかどうかを調べます。

参考資料

よくある質問

Q1. classListを使わずにクラスを追加することはできますか？

はい、`className` プロパティを直接操作することでクラスを追加することもできます。ただし、`classList` を使用した方が、既存のクラスを誤って削除してしまうリスクを減らすことができ、コードの可読性も高まります。

Q2. JavaScriptで要素にクラスを追加する方法は、CSSで直接スタイルを指定する方法と比べてどのようなメリットがありますか？

JavaScriptでクラスを操作することで、ユーザーの操作やイベント発生時に動的にスタイルを変更することができます。これにより、インタラクティブでリッチなWebページを実現できます。

Q3. classList.add() を実行してもクラスが追加されません。

考えられる原因としては、以下の点が挙げられます。

  • 対象の要素が正しく選択できていない。
  • JavaScriptコードにエラーがあり、`add()` メソッドが実行されていない。
  • 追加しようとしているクラス名が間違っている。

ブラウザの開発者ツールなどを活用し、エラーの発生原因を特定する必要があります。

その他の参考記事:jquery eq 取得