JavaScript

【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の追加や削除ができます。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2020 ウェブつく Powered by AFFINGER5