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

このブログを検索

ごあいさつ

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