JavaScript DOM 9 - 元素的尺寸與位置

zhaot 發(fā)布于2019-08-20 17:42 / 2210人閱讀

摘要：獲得頁(yè)面上某個(gè)元素在視口坐標(biāo)系的位置和元素的尺寸以上方法返回一個(gè)對(duì)象，包含六個(gè)元素，分別是此元素左上角和右下角的坐標(biāo)，以及元素的寬和高。

1: 獲得頁(yè)面上某個(gè)元素在視口坐標(biāo)系的位置和元素的尺寸：

element.getBoundingClientRect():

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

以上方法返回一個(gè)對(duì)象，包含六個(gè)元素，分別是此元素左上角和右下角的坐標(biāo)，以及元素的寬和高。但是在原始的IE中并不返回width和height, 不過(guò)可以自己通過(guò)坐標(biāo)計(jì)算出來(lái)。
值得注意的是getBoundingClientRect()不是實(shí)時(shí)的，在調(diào)用此函數(shù)后，用戶再滾動(dòng)或者改變?yōu)g覽器窗口大小，它返回的值并不會(huì)更新。

針對(duì)所有的文檔元素，它們都定義了三組變量跟尺寸和位置有關(guān)：

1: 包含border的尺寸

offsetWidth//返回包含border在內(nèi)的寬度
offsetHeight//返回包含border在內(nèi)的高度
offsetTop//元素與其offsetParent之間的垂直距離
offsetLeft//元素與其offsetParent之間的水平距離
offsetParent//

2: 不包含border的尺寸

clientWidth//返回不包含border在內(nèi)的寬度
clientHeight//返回不包含border在內(nèi)的高度
clientLeft//
clientTop//

3: 元素的滾動(dòng)條

scrollWidth//對(duì)于可滾動(dòng)的元素（overflow:scroll）的元素，返回元素內(nèi)容的寬度
scrollHeight//對(duì)于可滾動(dòng)的元素（overflow:scroll）的元素，返回元素內(nèi)容的高度
scrollLeft//對(duì)于可滾動(dòng)的元素（overflow:scroll）的元素，返回/設(shè)置元素的滾動(dòng)條向右邊滾動(dòng)的px
scrollTop//overflow:scroll）的元素，返回/設(shè)置元素的滾動(dòng)條向下邊滾動(dòng)的px