網頁中的各類上下左右寬高值

三種類型offset client scroll

offset

• 只讀屬性。
• width/height——顯示出來的屏幕尺寸
• top/left——相對於定位父元素的絕對位置

client

• 只讀屬性。
• width/height——不帶邊框的offset，也不包含滾動條寬度
• top/left——內邊距的外邊緣與邊框外邊緣的距離，一般是邊框寬度

scroll

• width/height——只讀，帶有溢出內容的client
• top/left——非只讀，相對於父容器的滾動起始位置，修改值能夠改變滾動位置

demo代碼見：https://codepen.io/jabbar/pen...

附加

• window.outerWidth/window.outerHeight——窗口的外層的寬度和高度
• window.innerWidth/window.innerWidth——瀏覽器窗口的視口(viewport)的寬度和高度
• window.screen.width/window.screen.height——屏幕寬度和高度
• window.screen.availWidth/window.screen.availHeight——屏幕可用寬度和高度
• window.screenTop/window.screenLeft——瀏覽器在屏幕位置

參考：

• https://segmentfault.com/a/11...
• https://juejin.im/entry/59772...