Javascript中常用寬高和坐標(biāo)屬性

wuyangnju 發(fā)布于2019-08-20 10:37 / 1503人閱讀

摘要：是一個(gè)只讀的屬性，元素的內(nèi)容高度寬度，包括由于屬性而不可見的部分。一個(gè)只讀屬性，返回一個(gè)指向最近的包含該元素的定位元素。很有用，因?yàn)楹投际窍鄬τ谄鋬?nèi)邊距邊界的。它包括內(nèi)部的寬度和高度和，但不包括滾動(dòng)條和。

1.scrollHeight/Width

scrollHeight/Width是一個(gè)只讀的屬性，元素的內(nèi)容高度/寬度，包括由于overflow屬性而不可見的部分。不能直接從css中得到。scrollHeight/Width的值除了內(nèi)容高度/寬度，也包括padding值。
scrollWidth類似。

2.scrollTop/Left

以scrollLeft為例：
scrollLeft屬性能夠得到或者設(shè)置元素滾動(dòng)到左邊的像素值。注意(rtl和ltr會(huì)不同)

假如element不能夠scroll的時(shí)候，比如沒有設(shè)置overflow屬性。scrollLeft會(huì)被重置為0，不管你設(shè)置什么值，都不會(huì)有什么效果。（這也是很多scrollLeft失效的原因）

設(shè)置的值小于0，重置為0

設(shè)置的值超過內(nèi)容允許滾動(dòng)的最大值，重置為最大值。

注意事項(xiàng)：scrollLeft屬性是應(yīng)用在父元素上面，而不是子元素。
其它scrollTop與scrollLeft類似。

3. offsetHeight/Width

offsetHeight/Width是一個(gè)只讀屬性，返回一個(gè)元素的結(jié)構(gòu)寬度，包括元素的border和padding、滾動(dòng)條(如果存在的話)和css設(shè)置的高度/寬度。

4.offsetTop/Left

以offsetLeft為例, 返回當(dāng)前元素左上角相對于HTMLElement.offsetParent節(jié)點(diǎn)的左邊界偏移的像素值。

HTMLElement.offsetParent:一個(gè)只讀屬性，返回一個(gè)指向最近的包含該元素的定位元素。如果沒有定位的元素，則 offsetParent 為最近的 table 元素或根元素（標(biāo)準(zhǔn)模式下為 html；quirks 模式下為 body）。當(dāng)元素的 style.display 設(shè)置為 "none" 時(shí)，offsetParent 返回 null。offsetParent 很有用，因?yàn)?offsetTop 和 offsetLeft 都是相對于其內(nèi)邊距邊界的。

例如：


  Short span. 
  Long span that wraps within this div.

offsetTop 類似的道理。

5.clientWidth/Height

clientWidth/Height是一個(gè)只讀屬性，對于沒有css或者內(nèi)聯(lián)元素，其值為0。它包括內(nèi)部的寬度和高度和padding，但不包括滾動(dòng)條、border和margin。

6.clientTop/Left

clientTop/Left指的是一個(gè)元素頂部/左邊框的寬度。

7. 區(qū)別

摘自stackoverflow的一幅圖，可以很好地看到之間的區(qū)別：

8.clientX/Y

clientX/Y屬性返回當(dāng)事件被觸發(fā)時(shí)鼠標(biāo)指針向?qū)τ跒g覽器頁面（或客戶區(qū)）的水平/豎直坐標(biāo)，不包括滾動(dòng)條滾動(dòng)才能顯示的區(qū)域。定位的依據(jù)為瀏覽器窗口內(nèi)容區(qū)域的左上角。

9.offsetX/Y(experimental technology)

offsetX/Y 設(shè)置或者是得到鼠標(biāo)相對于目標(biāo)事件的父元素的內(nèi)邊界在X/Y坐標(biāo)上的位置

10.screenX/Y

screenX/Y 相對于物理屏幕/監(jiān)視器的左上角，只有你增加或減少顯示器的數(shù)量或分辨率，參考點(diǎn)才會(huì)移動(dòng)。

11.pageX/Y

pageX/Y 相對于整個(gè)渲染頁面的左上角（包括通過滾動(dòng)隱藏的部分),簡單來說就是元素。

參考資料

1.Element.scrollHeight
2.Element.scrollLeft
3.HTMLElement.offsetWidth
4.HTMLElement.offsetParent
5.HTMLElement.offsetLeft
6.Element.clientHeight
7.Element.clientTop
8.Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively