JavaScript

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

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

この記事では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とは

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

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

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

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

classを追加するには

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

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

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


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

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

ウェブつく管理人

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

-JavaScript

© 2020 ウェブつく Powered by AFFINGER5