js中各種位置

js中有各種與位置相關的屬性,每次看到的時候都各種懵逼。索性一次總結一下。
clientHeight

內容可視區域的高度。包括padding不包括border、水平滾動條、margin。對于inline的元素這個屬性一直是0，單位px，只讀元素。

offsetHeight

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

scrollHieght

當子元素的高度比本元素高,且overflow不等于hidden時,scrollHeight就是網頁實際內容的高度。包括可視區域和被滾動條隱藏的區域。

clientWidth
offsetWidth
scrollWidth

同height

clientTop

元素上邊框的厚度,當沒有指定時,一般為0

offsetTop

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

scrollTop

滾動條被隱藏部分的高度,一般用來計算向下滾動多少像素

clientLeft
offsetLeft
scrollLeft

同top

event.clientX
event.clientY

相對于窗口可視區域的X,Y坐標,可視區域不包括工具欄和滾動條。

event.pageX
event.pageY

類似于event.pageX、event.pageY,但他們使用的是文檔坐標而非窗口坐標。這兩個屬性不是標準屬性，但得到廣泛支持。
event.pageX = event.clientX + 橫向滾動條距離。

event.offsetX
event.offsetY

鼠標相對于事件源元素(target)的X,Y坐標，只有IE事件有這兩個屬性，標準事件沒有對應的屬性

screenX
screenY

鼠標相對于用戶顯示器左上角的X,Y坐標。標準事件和IE事件都定義了這兩個屬性

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。