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

2019年3月22日

Javascript テクノロジー プログラミング

t f B! P L
jqueryのtoggle()関数を使って、ボタンのON,OFFを制御する時に、ライブラリを使わなくてもいいようにしたいと考えて、cssで便利に操作できるように、class名をコントロールできる簡単なソースを作ってみました。 使用用途は、任意のエレメントに特定のclass名を追加したり削除して、stylesheetで切り分けた表示を行えるようにします。 追加、削除を切り替えて行えるように"toggle"モードと、手作業でclass名が存在するか確認できるように"check"モードを容易してみました。

ソースコード

;$classValue = (function(){ // mode @ [check , add , del , toggle] var $$ = function(mode , element , value){ switch(mode){ case "check": return this.check(element , value); break; case "add": return this.add(element , value); break; case "del": return this.del(element , value); break; case "toggle": return this.toggle(element , value); break; } return false; }; // 任意エレメントのclass名の検索 // return @ [true : exist , false : none] $$.prototype.check = function(element , value){ if(!element || !value){return false;} var className = element.getAttribute("class"); if(!className){ return false; } var classNames = className.split(" "); if(classNames.indexOf(value) !== -1){ return true; } else{ return false; } }; // 任意のclass名を追加する // return @ [true : success , false : fail] $$.prototype.add = function(element , value){ if(!element || !value){return false;} if(!this.check(element , value)){ element.className += " " + value; return true; } else{ return false; } }; // 任意のclass名を除外する // return @ [true : success , false : fail] $$.prototype.del = function(element , value){ if(!element || !value){return false;} var classNames = this.check(element , value); if(!classNames){ return false; } else{ var newClass = []; for(var i=0; i<classNames.length; i++){ if(classNames[i] === value){continue;} newClass.push(classNames[i]); } element.className = newClass.join(" "); return true; } }; // 任意のclass名を付けたり取ったりする // return @ ["del" : exist->none , "add" : none->exist] $$.prototype.toggle = function(element , value){ if(!element || !value){return false;} if(this.check(element , value)){ this.del(element , value); return "del"; } else{ this.add(element , value); return "add"; } }; return $$; })();

使用例

特定ページに上記ソースを読み込んで、まずはインスタンスの作成 var classValue = new $classValue; 次に、任意エレメントに対して、クラス名を追加するには、 classValue.add(element , "hoge") 任意エレメントからクラス名を取り除くには、 classValue.del(element , "hoge") 任意エレメントに、指定のクラス名が存在するか確認刷る場合 classValue.check(element , "hoge") > true | false toggleは、任意クラス名が存在していれば削除して、無い場合は追加する処理を行います。 classValue.toggle(element , "hoge") 上記全ての処理に共通するreturn値として、成功、失敗をtrue,falseで返すようにしています。 ちなみに、応用として、"A"と"B"という文字列(class名)を切替toggleで行いたい場合は、以下のようにします。 ※どちらかが先に書かれている状態をデフォルトとします。 classValue.toggle(element , "A") classValue.toggle(element , "B") こうすることで、それぞれ、追加削除が入れ替わり行われるようになります。 これを便利に使うか、どうかはアナタ次第・・・・

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ