読み込んでいるCSSデータファイルに登録されている、styleの値を取得する機能を説明します。
通常のstyle取得は、エレメントの属性から取得します。
var style_value = elment.style.border;
などのように、取得できるだのだが、cssの場合は、なかなか勝手が違う。
jsonデータのようにCSSが取得できたらな〜と思って、ライブラリ作ってみました。
概要
ページ内でCSSが登録されているデータをselector情報から取得する。
仕様
param @ css : 対象styleタグ
param @ selTxt : selector
param @ styleName : style名
return @ style-value [string]
コード
(function(){
var $$={};
//スタイルシートの値を読み出す
$$.getStyle = 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;
}
}
}
};
//グローバル変数へ格納
window.$$LIB = $$;
//プログラム構造を返す（別変数に格納できる）
return $$;
})();
使い方
var header = document.getElementsByTagName("head");
var css = header[0].getElementsByTagName("");
var style_value = $$LIB.getStyle(css[0],".hoge","background-color");
//登録されているstyleの文字列を取得できます。
console.log(style_value);
注意点
読み込むcssデータは、別ドメインから読み込んでいるCSSデータはクロスドメインセキュリティにより、サイト内のjavascriptからは、参照することができません。
あくまでローカルサイト内のデータのみ確認できるようです。
0 件のコメント:
コメントを投稿