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

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

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

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

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

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

HTML

jQuery

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

jQuery実行後のHTML

要素に複数classを追加する

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

jQuery

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

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

jQuery

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

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

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

HTML

jQuery


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて