JavaScript DOM 9-元素のサイズと位置

1:ページ上の要素の視座座標系の位置と要素のサイズを取得します.

element.getBoundingClientRect():

{    
    left:8
    top:104
    right:1432
    bottom: 158
    width:1424
    height:54   
}

上記の方法は、この要素の左上隅と右下角の座標と、要素の幅と高さの6つの要素を含むオブジェクトを返します.しかし、元のIEではwidthとheightは返されませんでしたが、自分で座標から計算できます.注目すべきは、get BoundingClienntRect()はリアルタイムではなく、この関数を呼び出した後、ユーザがブラウザのウィンドウサイズをスクロールまたは変更しても、その値は更新されません.
すべてのドキュメント要素に対して、3つの変数がサイズと位置に関係していると定義されています.
1:borderを含むサイズ

offsetWidth//    border     
offsetHeight//    border     
offsetTop//    offsetParent       
offsetLeft//    offsetParent       
offsetParent//

2:borderのサイズは含まれていません.

clientWidth//     border     
clientHeight//     border     
clientLeft//
clientTop//

3:元素のスクロールバー

scrollWidth//        （overflow:scroll）   ，         
scrollHeight//        （overflow:scroll）   ，         
scrollLeft//        （overflow:scroll）   ，  /              px
scrollTop//overflow:scroll）   ，  /              px