addClassとremoveClass[toggleClass][jQuery]

2017年8月20日

jQueryオブジェクトのaddClass/removeClassメソッドを利用すると、指定した要素(セレクタ)のclass属性にクラスを追加/削除することができます。またtoggleClassメソッドを利用すると、交互にクラスを追加/削除することができます。

 

具体的な挙動として下記のデモ画面とそのコードで説明してみます。

 

デモ画面

 

 

addClass/removeClass/toggleClassメソッドの基本的な構文は下記のようになります。

 

$(セレクト).addClass(‘クラス名’);
$(セレクト).removeClass(‘クラス名’);
$(セレクト).toggleClass(‘クラス名’);

 

27〜29行目

id属性がbutton1のボタンをクリックすると、p要素(21行目)のclass属性に、sampleクラス(11行目)が追加されます。31〜33行目においてはその逆に、removeClassメソッドによってsampleクラスを削除しています。

 

35〜37行目

toggleClassメソッドを利用すると、ボタンをクリックするごとに、sampleクラスが交互に追加/削除されます。

 

追加/削除するクラスは、下記のように複数指定することができます。

 

$(セレクト).addClass(‘クラス名1 クラス名2 クラス名3 ’);

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー