1.offset家族
offsetWidth
元素真實大小(width + padding + border)
offsetLeft offsetTop (只讀的屬性)
獲取元素到offsetParent之間真實的距離
( offsetParent 距離元素最近的有定位的父元素,如果沒有找到,就返回body)
2.scroll家族
scrollHeight scrollWidth 內容捲曲高度
scrollTop scrollLeft 內容捲曲的距離 (滾動條滾動的距離)
(pageXOffset pageYoffset 跟 scroll家族類似但不適用於 ie)
獲取捲曲高度
window.pageYOffset ||document.documentElement.scrollTop||document.body.scrollTop || 0;
複製程式碼
獲取捲曲寬度
window.pageXOffset ||document.documentElement.scrollLeft||document.body.scrollLeft || 0;
複製程式碼
3.client家族
clientWidth clientHeight (可視區寬高)
clientLeft 左邊框寬度
clientTop 上邊框寬度
可視區的寬高
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
複製程式碼
事件物件中滑鼠點選的位置
screenX、screenY
相對於電腦螢幕
(拖拽瀏覽器視窗重新點選驗證)
pageX、pageY
相對於頁面包括帶有滾動條被捲曲的部分
(有進度條的情況下點選驗證,增加body寬高)
clientX、clientY
相對於body可視區域(不包括捲曲部分)
innerheight 返回視窗的文件顯示區的高度。
innerwidth 返回視窗的文件顯示區的寬度。