js中各種位置

js中有各種與位置相關(guān)的屬性,每次看到的時(shí)候都各種懵逼。索性一次總結(jié)一下。
clientHeight

內(nèi)容可視區(qū)域的高度。包括padding不包括border、水平滾動(dòng)條、margin。對于inline的元素這個(gè)屬性一直是0，單位px，只讀元素。

offsetHeight

offsetHeight = clientHeight + border + 滾動(dòng)條。對于inline的元素，這個(gè)屬性一直是0，單位px，只讀元素。

scrollHieght

當(dāng)子元素的高度比本元素高,且overflow不等于hidden時(shí),scrollHeight就是網(wǎng)頁實(shí)際內(nèi)容的高度。包括可視區(qū)域和被滾動(dòng)條隱藏的區(qū)域。

clientWidth
offsetWidth
scrollWidth

同height

clientTop

元素上邊框的厚度,當(dāng)沒有指定時(shí),一般為0

offsetTop

元素距離父元素頂端的高度

scrollTop

滾動(dòng)條被隱藏部分的高度,一般用來計(jì)算向下滾動(dòng)多少像素

clientLeft
offsetLeft
scrollLeft

同top

event.clientX
event.clientY

相對于窗口可視區(qū)域的X,Y坐標(biāo),可視區(qū)域不包括工具欄和滾動(dòng)條。

event.pageX
event.pageY

類似于event.pageX、event.pageY,但他們使用的是文檔坐標(biāo)而非窗口坐標(biāo)。這兩個(gè)屬性不是標(biāo)準(zhǔn)屬性，但得到廣泛支持。
event.pageX = event.clientX + 橫向滾動(dòng)條距離。

event.offsetX
event.offsetY

鼠標(biāo)相對于事件源元素(target)的X,Y坐標(biāo)，只有IE事件有這兩個(gè)屬性，標(biāo)準(zhǔn)事件沒有對應(yīng)的屬性

screenX
screenY

鼠標(biāo)相對于用戶顯示器左上角的X,Y坐標(biāo)。標(biāo)準(zhǔn)事件和IE事件都定義了這兩個(gè)屬性

總結(jié)

以上是生活随笔為你收集整理的js中各种位置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。