jQueryでクラス属性にクラスを追加・削除する方法

HTMLの要素に対し、動的にクラスを追加もしくは削除をする方法です。

スタイルを直接追加しても同じだけど、追加するスタイルが予め決まっていて、複数ある場合にはスタイルシートを定義しておいてそのクラスを追加したり削除したりすればコードもすっきりします。

たとえば以下のようなHTMLがあります。

<p id="idname">本日は晴れです。</p>

このHTML要素のスタイルをボタンで切り替えたいとします。

適用されるスタイルは、文字の色を赤にし、文字を大きくして、文字を太字にするものです。

.textstyle {
  color: red;
  font-weight: bold;
  font-size: 36px;
}

上記のスタイルを追加すると赤くて大きくて太い文字になるということです。

クラスを追加する

$("#idname").addClass("textstyle");

idname というIDを持つ要素に、textstyle というクラスを追加します。

デモページのボタンAの動きです。

複数のクラスを追加する場合は以下のように書きます。

$("#idname").addClass("クラスA クラスB クラスC");

クラスを削除する

$("#idname").removeClass("textstyle");

idname というIDを持つ要素の textstyle というクラスを削除します。

デモページのボタンBの動きです。

複数のクラスを削除する場合は以下のように書きます。

$("#idname").removeClass("クラスA クラスB クラスC");

指定したクラスを持っているか判定する

$("#idname").hasClass("textstyle");

idname というIDを持つ要素が textstyle というクラスを持っているかどうかを判定します。

持っていれば true で、持っていなければ false が返ってきます。

if($("#idname").hasClass("textstyle")){
  $("#idname").removeClass("textstyle");
} else {
  $("#idname").addClass("textstyle");
}

例えば上のコードのように書けば、idname というIDを持つ要素が textstyle というクラスを持っていれば textstyle クラスを削除し、持っていなければ追加するということが出来ます。

デモページのボタンCの動きです。

クラスの有り無し切り替え

「指定したクラスを持っているか判定する」でのサンプルコードですが、if文を使ってごたごた書かなくても1行でさっくり書くことが出来ます。

$("#idname").toggleClass("textstyle");

toggleClass(“クラス名”) はクラスを持っていれば削除し、無ければ追加してくれます。

デモページのボタンDの動きです。

まとめ

$(セレクター).addClass(クラス名); でクラスを追加する。

$(セレクター).removeClass(クラス名); でクラスを削除する。

$(セレクター).hasClass(クラス名); でクラスを持っているか判定する。

$(セレクター).toggleClass(クラス名); でクラスのオンオフを切り替える。