DOMのエレメントのスタイル属性を取得するコード

昔DIV要素のwidthやheightをスタイルシートで定義してそのdocument.getElementById('foo').style.widthとか取得できなくて(当然ですが…)悩んでいました。別件で同じようなことする必要でてきて書き直しましたのでポスト。

DOMのエレメントのスタイル属性を取得するコード

/**
 * エレメントに適用されているスタイル属性を取得する。
 *
 * background-color式を利用するかbackgroundColor式を利用するかでかわってくるので、
 * お好みに合わせて下のコメントをはずしてください。
 * 上のコメントをはずすとbackgroundColor式
 * 下のコメントをはずすとbackground-color式
 *
 * @ToDo 各ブラウザ毎の判別あまいので後で書直す。
 * @params {String} id ElementのID
 * @params {String} prop 参照したいスタイル名
 * @return {String} スタイルの値
 */
getElementStyle = function()
{
    // 必要ないかも…。
    if(!document.getElementById)
        return function(){};

    // Firefox, Opera, ( Safari ???)
    if(typeof(getComputedStyle) != 'undefined')
    {
        return function(id, prop)
        {
            prop = prop.replace(/([A-Z])/g,"-$1").toLowerCase();
            getComputedStyle(document.getElementById(id),'').getPropertyValue(prop);
        };
    };

    // IE Only
    return function(id, prop)
    {
        <span style="color:forestgreen;">// prop = prop.replace(/-([a-z])/g, function(){ return arguments[1].toUpperCase()} );</span>
        document.getElementById(id).currentStyle[prop];
    };
}(); // <- !!!

IE用のgetComputedStyle互換コード

本来ならgetComputedStyleは引数2つ必修ですが第二引数はa:hoverなどの擬餌クラス(?)を参照するものでIEでは出来ないので実装していないです。

if(!this.getComputedStyle)
{
    getComputedStyle = function(element)
    {
        element.getPropertyValue = getComputedStyle.getPropertyValue;
        return element;
    };
    getComputedStyle.getPropertyValue = function(prop)
    {
        prop = prop.replace(/-([a-z])/g, function(){ return arguments[1].toUpperCase()} );
        return this.currentStyle[prop];
    };
};

ちなみにスタイルの適用優先順位

← XHTML的にはナンセンス。
<div style="width:100px;">
HTMLに直接と記載したもの。
1. #id{}
2. .class{}
外部スタイルシートで定義されたもの
1. #id{}
2. .class{}

おまけに

DOCTYPE宣言したときとDOCTYPE宣言しなかったときの仕様が異なる。DOCTYPE宣言したときは単位が必修になる。element.style.width='100';では無視される。不正なプロパティ指定らしい(汗)DOCTYPE宣言無しのときはpxがあると想定して補ってくれる。

追記

IEとそれ以外では-を使うプロパティの取り扱い違いますので正規表現で変更してあげないといけないです。例えばbackground-colorならIEではbackgroundColorなどが必要です。すっかり忘れてた(汗)(brazil様よりコメントいただきました。)

■ background-color → backgroundColorに変換するコード
str = str.replace(/-([a-z])/g, function(){ return arguments[1].toUpperCase()});

■ backgroundColor → background-color
str = str.replace(/([A-Z])/g,"-$1").toLowerCase();