1 <！DOCTYPE HTML> 2 <HTMLのlang = "EN"> 3 <ヘッド> 4 <メタのcharset = "UTF-8"> 5 <タイトル> </タイトル> 6 <スタイル> 7 #box { 8 の幅：200pxの; 9 高さ：200pxの。 10 バックグラウンド色：赤。 11 パディング：20ピクセル; 12 ボーダー：10pxの固体＃000 ; 13 } 14 </スタイル> 15 </ HEAD> 16 <BODY> 17 < <スクリプト> 19 のvarボックス=のdocument.getElementById（ 'ボックス' ）; 20 にconsole.log（box.clientWidth、box.clientHeight）。// 240 240 21 にconsole.log（box.offsetWidth、box.offsetHeight）。// 260 260 22 </スクリプト> 23 </ BODY> 24 </ HTML>
幅+パディングclientWidth
幅+パディング+ボーダーoffsetWidth
1つの 幅と高さは、分析 2境界パディング+ + コンテンツ幅と高さを 3 にconsole.log（box.offsetWidth、box.offsetHeight） 。4 。5パディング+ 幅およびコンテンツの高さは 図6にconsole.log（box.clientWidth、box.clientHeight ）;
幅およびスクロールコンテンツ内のコンテンツの高さ
console.log（box.scrollWidth、box.scrollHeight）。
1 // offsetLeft：現在の要素が離れて親からボックス離れた配置 2 // offsetTop：親ケースの上面からの距離に位置している現在の要素を配置する 。3 にconsole.log（box.offsetLeft、box.offsetTop） 。4 。5 // clientLeft：境界線の幅を残した; 6。 // のclientTop：上縁の幅 7 にconsole.log（box.clientLeft、box.clientTop）; 8。 9。 // scrollLeft：左ローリング長さ; 10 // scrollTopスプライト：上部ロールの長さ 図11 にconsole.log（box.scrollLeft、box.scrollTop）。