ホーム >> 左脳Script >> Java Script >> エレメントのスタイルを取得するには?

エレメントのスタイルを取得するには?


JavaScript のプログラミングにおけるチョッとした疑問。
指定したエレメントに適応されているスタイルの任意の値を取得したい時には?

普通にsytleプロパティから参照すると、なんの設定もされていない場合に、ヌル文字列しか返ってきません。css の基本的な仕様で、親のスタイルを継承するからですが・・・

具体的なスタイルの値が欲しい場合が在ると思います。
そんな時は、以下のようなコードで取得が可能なようです。


function    getStyle(ele,target)
{
    var style   =   ele.currentStyle    ||  document.defaultView.getComputedStyle(ele,'');
    return  (   style   )   ?   style[target]   :   null;
}


これで、全て万全か・・・と思いきや、background-color は、まともに取得できません。
そもそも、Internet Explorer系では「background-color」ではなく「backgroundColor」 としないと値も取得できなかったりします。

実際、<body>に背景色スタイルが適応されていても、上記のコードでは取得できない場合が在ります。
  • safari系:rgba(0, 0, 0, 0)
  • Internet Explorer系:transparent
対象のエレメントに直接指定がない場合、このようになるようです。


function    getBgcolor(ele)
{
    do
    {
        var r   =   getStyle(ele,'backgroundColor');
        if( r==null )   break;  //  error
        if( r!="transparent"    &&  r!="rgba(0, 0, 0, 0)"   )   return  r;
    }
    while(  ele =   ele.parentNode  )
    //  見つからなかった
    return  "#000000";
}
真面目に遡ってみた所、見事取得成功。これで、背景色が取得できます。
なんか、もっと上手い方法がありそうな物ですが・・・こんなメソッド&プロパティがある!と知っている方いらっしゃいましたら是非教えてクダサイ!


IE8,Chrome1,Safari4,FireFox3にて確認。



トラックバック(0)

トラックバックURL: http://n-yagi.0r2.net/sanoupulurun/mt-tb.cgi/163

コメントする

ホーム >> 左脳Script >> Java Script >> エレメントのスタイルを取得するには?

アーカイブ

このブログ記事について

このページは、n-yagiが2009年6月16日 09:16に書いたブログ記事です。

ひとつ前のブログ記事は「タグの種別を判別するには」です。

次のブログ記事は「わらわら逃げる文字達 ~逃げるリンク 再び~」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Creative Commons License
このブログはクリエイティブ・コモンズでライセンスされています。