【JavaScript】class属性を追加するclassList.add()

以前、「classNameでクラス名を変更する」方法を紹介しました。

classNameを使う方法でしたね。

今回は、JavaScriptでクラス属性を追加する方法を紹介します。

クラスを追加するclassList.add

JavaScriptでクラスを追加するには、classList.addを使います。

デモ

まずはデモを見てみましょう。「ボタン」をクリックすると背景色が変わります。

onclickを使ってeventを発火させています。

実際のコード

上記のデモの実際のコードはこちらです。

function AddClass() {
  var target = document.getElementById("target");
  target.classList.add("AddedClass");
}

<a href="#" onclick="AddClass()">ボタン</a>
<div id="target">クラス名の追加によって背景色が変わります</div>

.AddedClass {
  background-color: yellow;
}

classListとは

「classList」は、class 属性を取得し操作できます。

add() や remove()を使って、classの追加や削除ができます。