JavascriptでCSSのプロパティ値を取得する方法

getElementById().styleで得られるスタイルシートの情報は、要素のインラインで設定されているもののみだそうです。
ブラウザ上で適用されているスタイルを呼び出したい場合は、getComputedStyle()(読み取り専用)を使います。

使い方は、

var Element = document.getElementById("ElementのID");
document.defaultView.getComputedStyle(Element, null).getPropertyValue("cssプロパティ名");

最後のgetPropertyValue()がなくても、getComputedStyle後にプロパティ名を直接書いても使えるようです。[例]↓

document.defaultView.getComputedStyle(Element, null).width;

IEでは上記のメソッドが使えないので、currentStyleを使います。

Element.currentStyle.[CSSプロパティ名]

でよいはずです。

これらをひとつの関数にまとめてみました。

var STYLE = function (aElement, aCssProperty){

	var tElementId = document.getElementById(aElement);

	if(tElementId.currentStyle){
		return tElementId.currentStyle[aCssProperty]; //IE
	}
	else{
		var style =  document.defaultView.getComputedStyle(tElementId, null) //firefox, Operaなど
		return style.getPropertyValue(aCssProperty);
	}

}

呼び出しは

 
STYLE("エレメント名", "cssプロパティ名");

です。IE7、Firefox2、Opera9で動作確認ができました。

ちなみにIEとMozilla系のCSSプロパティの書き方が違う場合があるそうなので、引数を分けたほうがよさそうなのですが
今のところこの関数ではwidthとheightしか使う予定がないので割愛しました。

[参考にさせて頂いたウェブサイト]

読者からの反応 (3 件)

  1. [Aipo5] ダイアログのサイズを変える

    オープンソースのグループウェア、Aipo5のカスタマイズに関するちょっとしたテク

  2. avatar ///素人/// より:

    どうでもいいことですが
    cssプロパティ名はjs専用の-の後を大文字変換する必要があるので
    var repNo=property.indexOf(‘-’);
    while(repNo!=-1){
    /* 大文字に変換すべき文字を取り出して変換 */
    var repSt=property.charAt(repNo+1).toUpperCase();
    property=property.slice(0,repNo)+repSt+property.slice(repNo+2);
    /* 再帰 */
    repNo=property.indexOf(‘-’);
    }
    ※property=aCssProperty

    を加えています。
    eval()を使わずに書きたかったのでブラケット表記法の勉強になりました。

  3. avatar 百田龍介 より:

    プロパティ名でなく文字列として入れるときはその変換いらないのでは?

コメントをどうぞ