jQueryを使わない方法「ページ内で使っているCSSの値を取得する」

2015年3月23日

Javascript Tips プログラミング

読み込んでいる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からは、参照することができません。 あくまでローカルサイト内のデータのみ確認できるようです。