classNameでクラス名を変更する【JavaScript】

2020年9月23日

クラス名を変更して、スタイルを変えたい！というときがありますよね。

この記事ではclass名を変更するJavaScriptコードを紹介します。

classNameを使います。

この記事の目次

クラス名を変更するコードサンプル

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

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

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

function classChange() {
  var target = document.getElementById("target");
  target.className = "classNameAfter";
}

<a href="#" onclick="classChange()">ボタン</a>
<div id="target" class="classNameBefore">class名によって背景を変えます</div>

.classNameBefore {
  background-color: red;
}

.classNameAfter {
  background-color: blue;
}

ここでは「className」でclassを変更しています。

「className」は、class 属性の取得・設定ができます。

下記のように、クラス名の判定に利用することができます。

var target = document.getElementById("target");
if ( target.className == "classNameAfter") {
  // クラス名が「classNameAfter」の処理
}

似たケースで「classを追加」したい場合があります。

classを追加するには、classList.add() というものがあります。以下の記事で解説しています。

ウェブつく管理人

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