那些虐死我的寬高

端端的土化程式碼發表於2019-03-29

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 返回視窗的文件顯示區的寬度。

相關文章