1.要素のインラインスタイルを取得します
コードコピーは次のとおりです。
var obj = document.getElementById（ "test"）;
アラート（obj.height + "/n" + obj.width）;
// 200px 200px typeof =文字列スタイル属性の値を表示するだけです
2。計算されたスタイルを取得します
コードコピーは次のとおりです。
var obj = document.getElementById（ "test"）;
var style = null;
if（window.getComputedStyle）{
style = window.getcomputedStyle（obj、null）; // nonie
} それ以外 {
style = obj.currentStyle; // IE
}
alert（ "width =" + style.width + "/nheight =" + style.height）;
注：要素の幅と高さが設定されていない場合、デフォルトの幅と高さは非IEブラウザーで返されます。 IEの下で自動文字を返します
3。<link>および<style>タグによって書かれたスタイルを取得します
コードコピーは次のとおりです。
var obj = document.stylesheets [0]; // [オブジェクトStyleSheetList]スタイルシート数<link> var Rule = null; // [object cssrule]
if（obj.cssrules）{
ルール= obj.cssrules [0]; // nonie [object cssrulelist]
} それ以外 {
ルール= obj.rules [0]; // ie [オブジェクトcssrulelist]
}
アラート（rule.style.width）;
cssrules（またはルール）は、インラインスタイルとリンクスタイルの幅と高さのみを取得でき、インラインおよび計算されたスタイルを取得することはできません。
概要：要素サイズを取得する上記の3つの方法は、要素のCSSサイズのみを取得できますが、要素自体の実際のサイズを取得することはできません。たとえば、内側のマージン、スクロールバー、境界線などを追加します。
4.要素の実際のサイズを取得します
1。ClientWidthおよびClientHeight
この一連の属性は、要素の視覚領域のサイズと、要素の内容と内側のマージンが占める空間のサイズを取得できます。要素サイズを返しますが、ユニットはありません、デフォルトユニットはPXです。 100EMなどのユニットを強制的に設定すると、PXのサイズを返します。 （CSSを取得すると、設定したスタイルに応じてCSSを取得します）。要素の実際のサイズについては、クライアント幅とクライアントハイトが次のように理解されます。
a。変更せずに境界を追加します。
b。変更せずにマージンを増やします。
c。スクロールバーを増やすと、最終値は元のサイズからスクロールバーのサイズを差し引いて等しくなります。
d。内側のマージンを増やすと、最終値は元のサイズと内側のマージンに等しくなります。
コードコピーは次のとおりです。
<div id = "test"> </div>
＃テスト{
背景色：緑;
幅：200px;
高さ：200px;
境界線：固体5px赤。 / *理解に対応する、結果：200,200 */
マージン：10px; /* Bの理解に対応する、結果：200,200*/
パディング：20px; /* Cの理解に対応する、結果：240,240*/
オーバーフロー：スクロール; / * Dの理解に対応する、結果：223,223,223 = 200（CSSサイズ） + 40（両側の境界縁）-17（スクロールバー幅） */
}
window.onload = function（）{
var obj = document.getElementById（ "test"）;
アラート（obj.clientwidth + "、" + obj.clientheight）;
};
注：CSSの幅と高さが設定されていない場合、非IEブラウザはスクロールバーの計算サイズとマージンをカウントし、IEブラウザは0を返します（IE8は固定されています）。
2。scrollwidthとscrollheight
このプロパティのセットは、スクロールコンテンツの要素サイズ（目に見えるコンテンツ）を取得できます。要素サイズを返し、デフォルトユニットはPXです。 CSSの幅と高さが設定されていない場合、計算された幅と高さが得られます。要素の実際のサイズについては、scrollwidthとscrollheightが次のように理解されます。
1.境界線を追加すると、さまざまなブラウザにはさまざまな説明があります（IE8では次のものが正常ですが、IE6は正しく機能しません）：
a）FirefoxおよびOperaブラウザは、国境のサイズ、220x220を増やします
b）IE、Chrome、Safariブラウザはボーダーサイズ、200x200を無視します
c）IEブラウザは、元のコンテンツの高さである200x18のみを表示します（IE8はこの問題を変更しました）
2。内側のマージンを追加すると、最終的な値は元のサイズと内側のマージンサイズ、220x220に等しくなり、IEは220x38です。
3.スクロールバーを追加すると、最終的な値は元のサイズからスクロールバーのサイズ、184x184、つまり184x18から等しくなります
4.外部データを追加してください。変更はありません。
5.コンテンツオーバーフロー、Firefox、Chrome、IEの実際のコンテンツの高さを取得し、Operaは最初の3つのブラウザで得られた高さよりも小さく、Safariは最初の3つのブラウザで得られた高さよりも大きくなります。
3。offsetWidthおよびoffSeight
このプロパティのセットは、境界、内側のマージン、スクロールバーなど、要素の実際のサイズを返すことができます。要素サイズを返し、デフォルトユニットはPXです。 CSSの幅と高さが設定されていない場合、計算された幅と高さが得られます。要素の実際のサイズについては、offsetWidthとoffSeightが次のように理解されます。
1.境界線を追加すると、最終値は元のサイズと境界サイズ（220）に等しくなります。
2。内側のマージンを追加すると、最終値は元のサイズと内側のマージンサイズ（220）に等しくなります。
3.外部データを追加します、変更なし。
4.スクロールバーを追加し、変更なしで減少しません。
要素サイズを取得するために、一般にブロックレベルの要素であり、CSSサイズの要素を設定する方が便利です。それがインライン要素またはサイズセットがない要素である場合、それは特に面倒なので、それを使用するときに注意を払うことをお勧めします。
コードコピーは次のとおりです。
<div id = "test"> test div要素</div>
＃テスト{
背景色：緑;
幅：200px;
高さ：200px;
境界線：固体10px赤。 /*結果：220,220*/
マージン：10px; /*結果：220,220（変更なし）*/
パディング：10px; /*結果：240,240*/
オーバーフロー：スクロール; /*結果：240,240（変更なし）*/
}
window.onload = function（）{
var obj = document.getElementById（ "test"）;
alert（obj.offsetwidth + "、" + obj.offseTheight）;
};
5.要素の周囲のサイズを取得します
1。ClientLeftとClientTopはボーダーサイズを取得します
この属性のセットは、要素のサイズを左の境界と上部の境界を設定することができます。現在、左のグループとトップグループのみが利用可能であり、右と下部は利用できません。 4つの側面の幅が異なる場合は、計算されたスタイルで直接それを取得するか、上記の3つのグループを使用して要素サイズを取得して減算を取得できます。
右の境界の幅：obj.offsetwidth-obj.clientwidth-obj.clientleft
底部の境界の幅：obj.offseethetheight-obj.clientheight-obj.clienttop
コードコピーは次のとおりです。
<div id = "test"> test div要素</div>
＃テスト{
背景色：緑;
幅：200px;
高さ：200px;
ボーダートップ：固体10px赤; s
国境右：ソリッド20px＃00ff00;
境界線：ソリッド30px青。
国境左：ソリッド40px＃808080;
}
window.onload = function（）{
var obj = document.getElementById（ "test"）;
アラート（obj.clientleft + "、" + obj.clienttop）; // 40,10
};
2。オフセットレフトとオフセット
この属性のセットは、親要素に対する現在の要素の位置を取得できます。親要素に対する要素の現在の位置を取得するには、それを位置の位置に設定することをお勧めします。絶対。それ以外の場合、異なるブラウザには異なる説明があります。
a。位置を絶対に設定すると、すべてのブラウザが同じ値を返します。のように：
コードコピーは次のとおりです。
<div id = "test"> test div要素</div>
＃テスト{
背景色：緑;
幅：200px;
高さ：200px;
位置：絶対;
左：30px;
トップ：20px;
}
window.onload = function（）{
var obj = document.getElementById（ "test"）;
アラート（obj.offsetLeft + "、" + obj.offsettop）; // 30、20
};
b。境界線と内側のマージンを追加しても、その位置には影響しませんが、外側のデータを追加すると蓄積されます。
3。box.offsetParent親要素を取得します
オフセットParentでは、親要素自体が<body>の場合、非IEはボディオブジェクトを返し、IE（IE6）はHTMLオブジェクトを返します。 2つの要素がネストされている場合、位置決め位置：Absoluteが親要素に使用されない場合、オフセットパレントはボディオブジェクトまたはHTMLオブジェクトを返します。したがって、オフセットレフトとオフセットを取得する場合、CSSのポジショニングは非常に重要です。
多くのレベルで、外層が配置されている場合、体またはHTML要素から内層の要素間の距離をどのように取得できますか？つまり、ページから任意の要素の場所を取得します。その後、蓄積を得るために常に上向きに戻ることにより、関数を書き込み、それらを実現できます。
コードコピーは次のとおりです。
box.offsettop + box.offsetparent.offsettop; //レイヤーが2つしかない場合
関数offsetLeft（element）{
var left = element.offsetLeft; //最初のレイヤー距離を取得します
var parent = element.offsetparent; //最初の親要素を取得します
while（parent！== null）{//以前の親要素がある場合
左 += parent.offsetLeft; //このレイヤーの距離を追加します
親= parent.offsetparent; //このレイヤーの親要素を取得します
} //次に、ループを続けます
左に戻ります。
}
4。スクロールトップと巻物柱膜
このプロパティのセットは、隠されているスクロールバーのエリアサイズ（スクロールバーの上の領域）を取得したり、その領域に配置するように設定したりできます。スクロールバーを最初の位置にスクロールする場合は、関数を書くことができます。
コードコピーは次のとおりです。
関数scrollstart（element）{
if（element.scrolltop！= 0）{
element.scrolltop = 0;
}
}
5。GetBoundingClientRect（）
このメソッドは、左、上、右、および下部の4つのプロパティを持つ長方形のオブジェクトを返します。要素の各端とページの上部と左側と左側の間の距離を示します。
コードコピーは次のとおりです。
var box = document.getElementById（ 'box'）; //要素を取得します
alert（box.getBoundingClientRect（）。TOP）; //要素の上の距離はページの上部からです
alert（box.getBoundingClientRect（）。右）; //ページの左側から要素の右側までの距離
alert（box.getBoundingClientRect（）。下）; //要素の下の距離はページの上部からです
alert（box.getBoundingClientRect（）。左）; //ページの左側から要素の左側までの距離
注：IE、Firefox3+、Opera9.5、Chrome、およびSafariサポート。 IEでは、デフォルトの座標は（2、2）から計算され、他のブラウザよりも2ピクセルが2つ高い最終距離が生じます。互換性がある必要があります。
コードコピーは次のとおりです。
document.documentelement.clienttop; //非IEは0、つまり2は2です
document.documentlement.clientleft; //非IEは0、つまり2は2です
functionggetRect（element）{
var rect = element.getBoundingClientRect（）;
var top = document.documentlement.clienttop;
var left = document.documentlement.clientleft;
戻る{
トップ：rect.top-トップ、
下：rect.bottom-トップ、
左：rect.Left-左、
右：rect.right-左
}
}
外部エッジ、内側のマージン、境界線、スクロールバーをそれぞれ追加して、すべてのブラウザが一貫しているかどうかをテストします。
上記は、この記事で説明されているすべてのコンテンツです。気に入っていただければ幸いです。