[JavaScript] elementのStyleを取得するカンタンコード

2015年3月19日

Javascript スニペット プログラミング

ページ内で、特定のElementが今どういうstyleが適用されているかを取得する関数を作ってみました。 簡単に取得するには、 var style_value = document.getElementById("hoge").style.backgroundColor; という風に、エレメントのpropertyを辿って行くことで取得できるのですが、外部CSSの記述はこの方法では拾えません。 さらに、camarizeという処理を加えないといけないことから、バグにつながる可能性も高いので、propertyからの取得はあまりおすすめできません。

ケース

表示・非表示トグル

ソフトアラートや、フローティングダイアログなどの"display:none"と"display:block"をtoggleで入れ替えるような処理の場合、対象のelementのdisplay値を取得すれば問題はないのですが、外部cssファイルでの記述の場合は、この関数を使うことで取得できるようになります。

背景色の取得

入力フォームで、エラーの場合に背景色を赤くする場合に、今どういう状態かをカラーの取得で判定することも可能です。

ソース

/** * form.js * create by yugeta.koji * since 2015.1.17 * * getCSS ----- * スタイルシートの値を読み出す * param @ css : 対象styleタグ * param @ selTxt : selector * param @ styleName : style名 * return @ style-value [string] * * setStyle ----- * スタイルシートの値を書き込む * * delStyle ----- * スタイルシートの値を削除する * * rgb2bit16 ----- * RGB記述を16進数の値に変更する。 * */ (function(){ var $$={}; /********** //style値を取得 概要:対象項目のCSS値を取得 param:element 対象項目 **********/ $$.getStyle=function(e,s){ if(!s){return} //対象項目チェック; if(typeof(e)=='undefined' || e==null || !e){ e = $b; } //属性チェック; var d=''; if(typeof(e.currentStyle)!='undefined'){ d = e.currentStyle[$$.camelize(s)]; if(d=='medium'){ d = "0"; } } else if(typeof(document.defaultView)!='undefined'){ d = document.defaultView.getComputedStyle(e,'').getPropertyValue(s); } return d; }; //スタイルシートの値を読み出す $$.getCSS = function(css , selTxt , styleName){ if(!css || !selTxt){return} if(styleName){ for(var j=0;j<css.cssRules.length;j++){ if(css.cssRules[j].selectorText==selTxt){ return css.cssRules[j].style[styleName]; } } } else{ for(var j=0;j<css.cssRules.length;j++){ if(css.cssRules[j].selectorText==selTxt){ return css.cssRules[j].cssText; } } } }; //特定のselector情報にcss設定を追加 $$.setCSS = function(css , selTxt , styleName , value){ if(!css || !selTxt || !styleName){return} //selectorTextの指定がある場合 for(var j=0;j<css.cssRules.length;j++){ if(css.cssRules[j].selectorText==selTxt){ css.cssRules[j].style[styleName] = value; return true; } } //対象セレクタが無い場合 css.addRule(selTxt , styleName+":"+value); }; //特定のselectorからcss設定を削除 $$.delCSS = function(css , selTxt , styleName){ if(!css || !selTxt){return} if(!css.cssRules){return} //selectorTextの指定がある場合 for(var j=css.cssRules.length-1;j>=0;j--){ if(css.cssRules[j].selectorText && css.cssRules[j].selectorText.match(selTxt)){ } } }; //rgb(**,**,**) -> #** $$.rgb2bit16 = function(col){ if(col.match(/rgb(.*?)\((.*)\)/)){ var rgb = RegExp.$2.split(","); var val="#"; for(var i=0;i<3;i++){ var val2 = parseInt(rgb[i],10).toString(16); if(val2.length==1){ val+="0"+val2; } else{ val+= val2; } } col = val; } return col; }; //ハイフン区切りを大文字に変換する。 $$.camelize = function(v){ if(typeof(v)!='string'){return} return v.replace(/-([a-z])/g , function(m){return m.charAt(1).toUpperCase();}); }; //グローバル変数へ格納 window.$$LIB = $$; //プログラム構造を返す(別変数に格納できる) return $$; })();

使い方

# 1.表示・非表示の取得 var display_value = $$LIB.getStyle(document.getElementById("hoge"),"display"); console.log(display_value); # return : block / none / inline ... # 2.背景色の取得 var bg_col_value = $$LIB.getStyle(document.getElementById("hoge"),"background-color"); console.log(bg_col_value); # return : rgb(255, 255, 255) *whiteの場合

このブログを検索

ごあいさつ

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