JS: 關於元素大小和距離的有關的屬性總結

Element的屬性中關於距離的屬性

1. 偏移量

   offsetHeight：元素在垂直方向上所佔空間的大小，包括(上下邊框和水平滾動條的高度,不包括外邊距)
   offsetWidth：元素在水平方向上所佔空間的大小，包括(左右邊框和垂直滾動條的寬度)
   offsetLeft：元素的左外邊框與包含元素的左內邊框的距離
   offsetTop：元素的上外邊框與包含元素的上內邊框的距離
   offsetparent：距離元素最近的而且具備大小的元素

   若是想知道某個元素在頁面上的偏移量，只須要將這個元素的offsetTop或者offsetLeft與offsetparent的相同屬性相加，不斷迭代至根元素，就能夠獲得基本準確的值。

2. 客戶區大小

   clientWidth：元素左內邊框到元素右內邊框的距離(內容區加內邊距)
   clientHeight：元素上內邊框到元素下內邊框的距離(同上)

   指的元素內容以及元素內邊距所佔空間的大小

3. 滾動大小

   scrollHeight：沒有滾動條的狀況下，元素內容的總高度(內容區加內邊距)
   scrollWidth：沒有滾動條的狀況下，元素內容的總寬度(同上)
   scrollLeft：被隱藏在元素內容區域左側的像素數，經過設置這個能夠改變元素的滾動位置
   scrollTop：被隱藏在元素內容區域上方的像素數，經過設置這個能夠改變元素的滾動位置

   帶有垂直滾動條的頁面中，document.documentElement.scrollHeight就是頁面內容區總高度，在沒有滾動條的頁面中，則document.documentElement.scrollHeight指定的值隨瀏覽器不肯定，在chrome中，document.documentElement.scrollHeight指的是視口高度，document.documentElement.scrollWidth指的是視口寬度。

   我用chrome測試了一下，發現scrollHeight和offsetHeight好像一直是相同的值。

4. DOMRect

   bottom:1028
   height:1020
   left:8
   right:928
   top:8
   width:920
   x:8
   y:8

   在元素中調用getBoundingClientRect()會返回含有以上參數的DOMRect對象，top,bottom表示元素上/下內邊框到視口頂端距離，left和right表示元素左/右內邊框到視口左端距離。感受這個api很方便，之後就用它了。

event中關於距離屬性

當觸發鼠標事件的時候，事件對象會有一些屬性幫助定位鼠標指針

1. 客戶區座標位置

   clientX:鼠標指針在視口中的水平座標
   clientY:鼠標指針在視口中的垂直座標

2. 屏幕座標位置

   screenX:鼠標指針在屏幕(桌面)中的水平座標
   screenY:鼠標指針在屏幕中的垂直座標

3. 偏移量

   offsetX:光標相對於目標元素(event.target指向的元素；觸發該事件的元素)邊界(內邊框)的x座標
   offsetY:光標相對於目標元素邊界的y座標

   當光標指針在目標元素的內邊框以外，外外邊距以內的時候，offsetX/Y爲負值。