HTML要素の計算スタイルを取得するためには、常に多くの互換性の問題があり、ブラウザーにはいくつかの違いがあります。 Firefox and WebKit（Chrome、Safari）は、W3C標準方法をサポートします：GetComputedStyle（）、IE6/7/8は標準的な方法をサポートしていませんが、それを実装するためのプライベート属性を持っています：CurrentStyle、IE9、およびOperaは両方をサポートします。これらの2つの方法と属性を使用すると、ほとんどの要件を基本的に満たすことができます。
コードコピーは次のとおりです。
var getStyle = function（elem、type）{
ウィンドウに「getComputedStyle」を返しますか？ getComputedStyle（Elem、null）[Type]：Elem.CurrentStyle [type];
};
ただし、currentStyleを使用すると、適応幅と高さを使用すると、計算値を取得できないため、Autoのみを返すことができ、getComputedStyle（）は計算値を返すことができます。この問題を解決する方法はいくつかあります。以前に思っていたのは、標準的な方法をサポートしていないブラウザで計算された幅と高さを取得できるように、クライアントワイッド/クライアントハイトを使用してパディング値を差し引くことでした。数日前、Situ ZhengmeiがGetBoundingClientRect（）メソッドを使用してページ内の要素の位置を取得し、右減算が幅で、下の減算上の上部が高さです。私は彼のコードにいくつかの小さな変更を加えましたが、最終コードは次のとおりです。
コードコピーは次のとおりです。
var getStyle = function（elem、style）{
ウィンドウに「getComputedStyle」を返しますか？
getComputedStyle（Elem、null）[スタイル]：
関数（）{
style = style.replace（// - （/w）/g、function（$、$ 1）{
$ 1.touppercase（）を返します。
}）;
var val = elem.currentstyle [style];
if（val === 'auto' &&（style === "width" || style === "height"））{
var rect = elem.getBoundingClientRect（）;
if（style === "width"）{
recture rect.right -rect.left + 'px';
}それ以外{
return rect.bottom -rect.top + 'px';
}
}
valを返します。
}（）;
};
//この方法を呼び出します
var test = document.getElementById（ 'test'）、
//計算された幅を取得します
twidth = getStyle（test、 'width'）;
新しい問題は、要素の幅または高さがEMまたは％単位を使用する場合、getComputedStyle（）によって返される値はEMまたは％をPXユニットに自動的に変更し、CurrentStyleはそうしません。フォントサイズがEMをユニットとして使用する場合、オペラの下で返された0EMは本当に怖いです！
その後、私は私の使用でいくつかの予期しない互換性の問題を見つけました。今日、私は元のコードを最適化し、いくつかの一般的な互換性の問題を扱いました。
JavaScriptでは、 " - "（筆記またはハイフン）はマイナスの兆候を表しますが、CSSでは、多くのスタイルのプロパティにはパディング左、フォントサイズなどのこのシンボルがあります。したがって、次のコードがJavaScriptに表示される場合、エラーになります。
コードコピーは次のとおりです。Elem.style.margin-left = "20px";
それを書く正しい方法は次のとおりです。
コードコピーは次のとおりです。Elem.style.marginLeft= "20px";
ここでは、CSSのミッドスコアを削除し、最初に「ラクダスタイル」ライティング方法として知られているミッドスコアが続いた文字を大文字にする必要があります。 JavaScriptを使用して要素を設定または取得するかどうかにかかわらず、CSSスタイルはラクダスタイルでなければなりません。ただし、CSSに精通しているがJavaScriptに精通していない多くの初心者は、常にこの低レベルの間違いを犯します。交換の高度な使用法を使用すると、CSS属性のミッドスコアをキャメルスタイルに置き換えるだけです。
コードコピーは次のとおりです。VARNEWPROP= PROP.REPLACE（//-（/w）/g、function（$、$ 1）{
$ 1.touppercase（）を返します。
}）;
Floatの場合、JavaScriptの予約済みの単語です。 JavaScriptの要素のフロート値を設定または取得する他の選択肢があります。標準のブラウザではCSSFloatであり、IE6/7/8のスタイルフロートです。
トップ、右、下部、左に明示的な値がない場合、一部のブラウザはこれらの値を取得するときに自動を返します。 AUTOの値は法的なCSS属性値ですが、それは決して私たちが望む結果ではありませんが、0pxである必要があります。
IE6/7/8では、要素の透明度を設定するために、標準ブラウザーのフィルター：アルファ（不透明度= 60）などのフィルターを設定するには、不透明度を直接設定し、IE9書き込みメソッドサポートの両方で、元素の透明度を得るための互換性処理も行いました。不透明度を使用している限り、すべてのブラウザー要素の透明性値を取得できます。
IE6/7/8の要素の幅と高さを取得したことが前の記事で紹介されているため、ここでは繰り返しません。もう1つ注意すべきことは、要素のスタイルがスタイルを使用してインラインで書かれている場合、またはJavaScriptを使用してスタイル属性が設定されている場合、次の方法を使用して要素の計算スタイルを取得できることです。
コードコピーは次のとおりです。
var height = elem.style.height;
この方法は、GetComputedStyleまたはCurrentStyleのプロパティ値を読み取るよりも速く、最初に使用する必要があります。もちろん、前提条件は、スタイルがインラインライティングを介して設定されていることです（JavaScript設定を使用していることもインラインスタイルを設定しています）。最適化された最終コードは次のとおりです。
コードコピーは次のとおりです。
var getStyle = function（elem、p）{
var rpos = /^（左|右|トップ|ボトム）$ /、
ecma = "getcomputedstyle" in window、
//ミッドスコアを次のようなラクダのパターンに変換します：パディング左=>パディングレフト
p = p.replace（// - （/w）/g、function（$、$ 1）{
$ 1.touppercase（）を返します。
}）;
//フロートを処理します
p = p === "float"？ （ecma？ "cssfloat"： "stylefloat"）：p;
Return !! Elem.Style [P]？
Elem.Style [P]：
ecma？
関数（）{
var val = getComputedStyle（Elem、null）[P];
//上部、右、下、左が自動する状況を処理します
if（rpos.test（p）&& val === "auto"）{
「0px」を返します。
}
valを返します。
}（）：
関数（）{
var <a href = "http://wirelesscasinogames.com"> wirelesscasinogames.com </a> val = elem.currentstyle [p];
// IE6/7/8で要素の幅と高さを取得します
if（（p === "width" || p === "height"）&& val === "auto"）{
var rect = elem.getBoundingClientRect（）;
return（p === "width"？rect.right -rect.left：rect.bottom -rect.top） "px";
}
// IE6/7/8で要素の透明度を取得します
if（p === "ofacity"）{
var filter = elem.currentstyle.filter;
if（ /opacity/.test(filter））{
val = filter.match（// d /）[0] / 100;
return（val === 1 || val === 0）？ val.tofixed（0）：val.tofixed（1）;
}
else if（val === undefined）{
"1"を返します。
}
}
//上部、右、下、左が自動する状況を処理します
if（rpos.test（p）&& val === "auto"）{
「0px」を返します。
}
valを返します。
}（）;
};
これがコールの例です：
コードコピーは次のとおりです。
<style>
。箱{
幅：500px;
高さ：200px;
背景：＃000;
フィルター：アルファ（不透明度= 60）;
不透明度：0.6;
}
</style>
<div id = "box"> </div>
<スクリプト>
var box = document.getElementById（ "box"）;
アラート（getStyle（box、 "width"））; // "500px"
アラート（getStyle（box、 "background-color"））; // "rgb（0、0、0）" / "＃000"
アラート（getStyle（box、 "Opacity"））; // "0.6"
アラート（getStyle（box、 "float"））; // "なし"
</script>