javascript
JS: 关于元素大小和距离的有关的属性总结
2019獨角獸企業重金招聘Python工程師標準>>>
Element的屬性中關于距離的屬性
偏移量
offsetHeight：元素在垂直方向上所占空間的大小，包括(上下邊框和水平滾動條的高度,不包括外邊距) offsetWidth：元素在水平方向上所占空間的大小，包括(左右邊框和垂直滾動條的寬度) offsetLeft：元素的左外邊框與包含元素的左內邊框的距離 offsetTop：元素的上外邊框與包含元素的上內邊框的距離 offsetparent：距離元素最近的并且具有大小的元素如果想知道某個元素在頁面上的偏移量，只需要將這個元素的offsetTop或者offsetLeft與offsetparent的相同屬性相加，不斷迭代至根元素，就可以得到基本準確的值。
客戶區大小
clientWidth：元素左內邊框到元素右內邊框的距離(內容區加內邊距) clientHeight：元素上內邊框到元素下內邊框的距離(同上)指的元素內容以及元素內邊距所占空間的大小
滾動大小
scrollHeight：沒有滾動條的情況下，元素內容的總高度(內容區加內邊距) scrollWidth：沒有滾動條的情況下，元素內容的總寬度(同上) scrollLeft：被隱藏在元素內容區域左側的像素數，通過設置這個可以改變元素的滾動位置 scrollTop：被隱藏在元素內容區域上方的像素數，通過設置這個可以改變元素的滾動位置帶有垂直滾動條的頁面中，document.documentElement.scrollHeight就是頁面內容區總高度，在沒有滾動條的頁面中，則document.documentElement.scrollHeight指定的值隨瀏覽器不確定，在chrome中，document.documentElement.scrollHeight指的是視口高度，document.documentElement.scrollWidth指的是視口寬度。
我用chrome測試了一下，發現scrollHeight和offsetHeight好像一直是相同的值。
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中關于距離屬性
當觸發鼠標事件的時候，事件對象會有一些屬性幫助定位鼠標指針
客戶區坐標位置
clientX:鼠標指針在視口中的水平坐標 clientY:鼠標指針在視口中的垂直坐標屏幕坐標位置
screenX:鼠標指針在屏幕(桌面)中的水平坐標 screenY:鼠標指針在屏幕中的垂直坐標偏移量
offsetX:光標相對于目標元素(event.target指向的元素；觸發該事件的元素)邊界(內邊框)的x坐標 offsetY:光標相對于目標元素邊界的y坐標當光標指針在目標元素的內邊框之外，外外邊距之內的時候，offsetX/Y為負值。
轉載于:https://my.oschina.net/u/3400107/blog/1840526
總結
以上是生活随笔為你收集整理的JS: 关于元素大小和距离的有关的属性总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 信息系统定级与备案工作介绍
- 下一篇： Android8.0适配那点事（二）