jQueryで要素にクラスを追加する：addClass(), removeClass(), toggleClass()

今回は、jQueryで要素にclassを追加する方法を説明します。

イベントによって動的にclassを追加することで、デザインを切り替える時などに使うことができます。

要素にclassを追加する.addClass()

addClass()は、指定した要素にclassを追加するメソッドです。

以下の例では、#targetにshowというclassが追加されます。

HTML

<div id="target"></div>

jQuery

$("#target").addClass("show");

そして、jQueryが実行されると以下のような表示となります。

jQuery実行後のHTML

<div id="target" class="show"></div>

要素に複数classを追加する

また、addClass()メソッドは、クラス名をスペース区切りにすることで複数追加することができます。

jQuery

$("#target").addClass("class1 class2");

要素からclassを削除する.removeClass()

removeClass()は、指定した要素のクラスを削除するメソッドです。

jQuery

$("#target").removeClass("show");

クラスを追加・削除する.toggleClass()

toggleClass()は、指定した要素に指定したclassがない場合は追加、すでにある場合は削除するメソッドです。

以下の例では、ボタンのクリック毎にborderクラスが追加・削除されます。

HTML

<p id="target">ターゲット要素</p>
<button id="toggle">ボタン</button>

jQuery

$("#toggle").on("click", function(){
  $("#target").toggleClass("border");
});