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まとめ
addClassやremoveClassは本当によく使うメソッドです。タブやボタンのオンオフ等、classを変えることでデザインや表示を変えることができ、様々な応用が効きます。