[Javascript] class文字列操作に便利なスニペット

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

jqueryのtoggle()関数を使って、ボタンのON,OFFを制御する時に、ライブラリを使わなくてもいいようにしたいと考えて、cssで便利に操作できるように、class名をコントロールできる簡単なソースを作ってみました。
 

使用用途は、任意のエレメントに特定のclass名を追加したり削除して、stylesheetで切り分けた表示を行えるようにします。
 

追加、削除を切り替えて行えるように”toggle”モードと、手作業でclass名が存在するか確認できるように”check”モードを容易してみました。
 

ソースコード

使用例

特定ページに上記ソースを読み込んで、まずはインスタンスの作成
 

 

次に、任意エレメントに対して、クラス名を追加するには、
 

 

任意エレメントからクラス名を取り除くには、
 

 

任意エレメントに、指定のクラス名が存在するか確認刷る場合
 

 

toggleは、任意クラス名が存在していれば削除して、無い場合は追加する処理を行います。
 

 

上記全ての処理に共通するreturn値として、成功、失敗をtrue,falseで返すようにしています。
 

ちなみに、応用として、”A”と”B”という文字列(class名)を切替toggleで行いたい場合は、以下のようにします。
※どちらかが先に書かれている状態をデフォルトとします。
 

 

こうすることで、それぞれ、追加削除が入れ替わり行われるようになります。
 

これを便利に使うか、どうかはアナタ次第・・・・

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です