ページ内で、特定の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の場合
