js中各類位置

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事件都定義了這兩個屬性