インライン (つまり、style 属性によって追加される) スタイル定義に加えて、要素の CSS スタイルには、ページに埋め込まれる CSS と外部から導入される CSS という 2 つの方法もあります。ただし、JS では、el.style.xxx を通じてインライン スタイル属性のみを取得できるため、比較的大きな制限があります。幸いなことに、IE には、他の方法で定義されたスタイル属性を取得する別の方法が用意されており、getComputedStyle などのその他の w3c 標準ブラウザーがあります。
操作を容易にするために、現在の js-lib の多くはこれをカプセル化していますが、多くの場合、ライブラリを導入する必要はありません。要素の現在のスタイル定義を取得するために必要なのは getStyle 関数だけです。いくつかの JS-Lib コードを参照した後、getStyle 関数の簡易バージョンを実装することにしました。この関数の目標は、ほとんどのニーズを満たし、クロスブラウザーに対応し、コードが簡潔で、優れたパフォーマンスを実現することです。これらの要件に基づいて、私は主に「JS 論理演算子の特性、コードの「コンパイル」、関数の即時実行などのいくつかのヒントを使用して、これを完了するのに 1 時間かかりました。今後の使用のためにここに書き留めておきます。もちろん、それがより良いでしょう。
プログラムコード
var getStyle=function(){
var f=document.defaultView;
return new Function('el','style',[
"style.indexOf('-')>-1 && (style=style.replace(/-( \w)/g,function(m,a){return a.toUpperCase()}));",
"style=='float' && (style='",
f ? 'cssFloat' : 'styleFloat',
"');return el.style[style] || ",
f ? 'window.getComputedStyle(el, null)[スタイル]' : 'el.currentStyle[スタイル]',
' || null;'].join(''));
}();
//使用例:
var el=document.getElementById('test');
getStyle(el,'行の高さ');
getStyle(el,'color');
getStyle(el,'float');
出典: http://www.ajaxbbs.net/post/webFront/JS-Get-Style-Function.html