乐趣区

网页中的各种上下左右宽高值

三种类型 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…

退出移动版