getComputedStyle と currentStyle はスタイル (スタイル/クラス)_javascript スキルを取得します

document.getElementById('element').style.xxx を使用して要素のスタイル情報を取得できることは誰もが知っていますが、参照される DOM 要素の style 属性のスタイル ルールのみを取得します。 class 属性を介しては、必要な情報を取得できません。

DOM 標準には、現在のオブジェクト スタイル ルール情報を取得できるグローバル メソッド getComputedStyle があります。たとえば、オブジェクトの左パディングを取得できる getComputedStyle(obj,null).paddingLeft などです。しかし、問題はまだ終わっていません。邪悪な IE はこのメソッドをサポートしていません。これは、グローバル メソッド getComputedStyle とは異なり、obj.currentStyle.paddingLeft などの独自の実装メソッドを持っています。 IE では、オブジェクトの左内側のマージンを取得します。

コードをコピーします。 コードは次のようになります。

return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;

このようにして、現在の値がオブジェクトのスタイル情報を IE および FF で返すことができます。

特記事項: 現在のオブジェクトの色情報を取得したい場合、IE は 16 進数の '#ffffff' を返しますが、FF は rgb(255,255,255) を返します。

style 属性は次のことができます。 HTMLタグのスタイルは取得できますが、非インラインスタイルは取得できません。では、js を使用して CSS の非インターライン スタイルを取得するにはどうすればよいでしょうか? IE では currentStyle を使用できますが、Firefox では getComputedStyle を使用する必要があります。ここに小さな例を示します:

コードをコピー コードは次のとおりです:

関数 getStyle(obj, attr) 🎜>if( obj.currentStyle)
{
return obj.currentStyle[attr];
else
{
return getComputedStyle(obj,false)[attr]; 🎜>}
}
window.onload=function()
{
var oDiv=document.getElementById('div1')
alert(getStyle(oDiv,'width'));
}

/body>