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