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件のコメント
///素人/// · 2013-09-09 17:56
どうでもいいことですが
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()を使わずに書きたかったのでブラケット表記法の勉強になりました。
百田龍介 · 2014-04-05 00:01
プロパティ名でなく文字列として入れるときはその変換いらないのでは？
ぱぱろぐのこころぐ · 2011-10-11 17:37
[Aipo5] ダイアログのサイズを変える
オープンソースのグループウェア、Aipo5のカスタマイズに関するちょっとしたテク
現在コメントは受け付けていません。