Hatoblog(はとブログ)

jQueryでclassを追加・削除するメソッド【addClass、removeClass、hasClass】

こんにちは、はとむぎです。
前回に引き続き今回は、jQueryの数あるメソッドの中で、「クラスの追加・削除に関するもの、クラスを持っているかどうか判定するもの」を紹介しようと思います。

今回は以下の流れで解説していこうと思います。

それでは早速いきましょう。

各メソッドの概要

addClass、removeClass、toggleClass

addClassは、指定の要素に指定のclassを追加します。
addClass – リファレンス

removeClassは逆に、 指定の要素から指定のclassを削除します。
removeClass – リファレンス

toggleClassは、要素してのclassを持っていなければaddClass を、持っていればremoveClass を実行します。オン/オフを切り替えたりする時に便利です。
toggleClass – リファレンス

hasClass

hasClassは、指定の要素が指定のclassを持っているかどうかを判定します。持っていればtrueを、持っていなければfalseを返します。
hasClass – リファレンス

使い方

まずは、基本的な動作について解説します。下記の構文の通りです。

// 「addClass」クラスを追加
$('target').addClass( className );

// 「removeClass」クラスを削除
$('target').removeClass( className );

// 「toggleClass」クラスを持っていなければ追加、持っていれば削除
$('target').toggleClass( className );

// 「hasClass」クラスを持っているかを判定
$('target').hasClass( className );

target
動作を行う対象となるHTML要素です。複数の要素を指定してもOKです。

className
追加・削除などを行うクラス名を指定します。hasClass以外は半角スペース区切りで複数指定が可能です。

実際の使い方は以下のようになります。

// 「addClass」クラスを追加
$('target').addClass( 'my-class' );
// 複数追加もできる。半角スペース区切り
$('target').addClass( 'my-class your-class' );


// 「removeClass」クラスを削除
$('target').removeClass( 'my-class' );
// addClassと同じように複数削除もできる。半角スペース区切り
$('target').removeClass( 'my-class your-class' );


// 「toggleClass」クラスを持っていなければ追加、持っていれば削除
$('target').toggleClass( 'my-class' );
// 複数指定もできる。半角スペース区切り。あまり使わない
$('target').toggleClass( 'my-class your-class' );


// 「hasClass」クラスを持っているかを判定
// <h1 class="title">タイトル</h1>という要素があった場合
var isHasMyClass = $('.title').hasClass( 'my-class' ); // true
var isHasYourClass = $('.title').hasClass( 'your-class' ); // false

まとめ

addClassremoveClassは本当によく使うメソッドです。タブやボタンのオンオフ等、classを変えることでデザインや表示を変えることができ、様々な応用が効きます。