jsメモ(7)——style、currentStyle、getComputedStyleの違い紹介

転者語:
今日はjQueryソースCSSセクションを見て、currentStyleとgetComputedStyleを使って外部スタイルを取得しました.
なぜならstyle.widthはelemのstyleプロパティのスタイルしか取得できず、外部cssファイルで定義されたスタイルを取得できないため、IE 8以下および他のブラウザでは、currentStyleとgetComputedStyleの2つの異なる方法で外部cssスタイルを取得する必要があります.
以下の文章はよく述べて、比較的によく理解して、簡潔で、ここで以下を推薦します.
 
 
スタイルシートには、次の3つの方法があります.
インサートスタイル(inline Style):Tagに書かれており、インサートスタイルはすべてのTagにのみ有効です.(「インラインスタイル」とも呼ばれる)
内部スタイル(internal Style Sheet):HTMLの中に書かれており、内部スタイルは所在するページにのみ有効です.
外部スタイルシート(External Style Sheet):多くのページで同じスタイル(Styles)を使用する必要がある場合は、スタイル(Styles)を1つに書く.cssは接尾辞のCSSファイルにあり、これらのスタイル(Styles)が必要なページごとにこのCSSファイルを参照します.最もよく使われるのはstyle属性で、JavaScriptではdocument.getElementById(id).style.XXXはXXXの値を取得することができますが、意外なことに、このようにすると、埋め込み方式で設定されたスタイル値、すなわちstyle属性に設定された値しか取得できません.
 
ソリューション:currentStyle,runtimeStyle,getComputedStyle style標準のスタイルを導入します.styleプロパティで指定されている可能性があります.
RuntimeStyle実行時のスタイル!スタイルのプロパティと重なると、スタイルのプロパティが上書きされます!
CurrentStyleとはstyleとruntimeStyleの結合を指す!CurrentStyleでは、内部参照または外部参照によるCSSスタイルの値(IEのみ)が取得できる(document.getElementById("test").currentStyle.top
FF対応にはgetComputedStyleが必要です
注意:getComputedStyleはfirefox、currentStyleはieです.例えば

<style>
#mydiv {
     width : 300px;
}
</style>

次のようになります.

var mydiv = document.getElementById('mydiv');
if(mydiv.currentStyle) {
      var width = mydiv.currentStyle['width'];
      alert('ie:' + width);
} else if(window.getComputedStyle) {
      var width = window.getComputedStyle(mydiv , null)['width'];
      alert('firefox:' + width);
}

またFFでは以下のように取得することもできる

document.defaultView.getComputedStyle(mydiv,null).width;
window.getComputedStyle(mydiv , null).width;

 
 
www.cnblogs.com/flyjsから