JS获取浏览器中的各种宽高值

Posted 2020-10-12 与光同尘

width：

clientWidth：对象实际内容的宽度，不包含边线，最大不超过视口宽度 
offsetWidth：对象实际宽度，包含边线，最大不超过视口宽度 
scrollWidth：对象实际宽度，不包含边线，可超过视口宽度

height：（都可超过视口高度）

clientHeight：对象实际内容的高度，不包含边线 
offsetHeight：对象实际高度，包含边线 
scrollHeight：对象实际高度，不包含边线。如果对象为body，大于视口时为实际高度，小于视口时为视口高度

分辨率宽高：

window.screen.width：屏幕分辨率宽度 
window.screen.height：屏幕分辨率高度 
window.screen.availWidth：屏幕工作区宽度 
window.screen.availHeight：屏幕工作区高度（不包含windows底边栏）

滚动距离：

scrollTop：对象被卷去的高度 
scrollLeft：对象被卷去的宽度

偏移值：

event.clientX：相对文档的横向偏移值 
event.clientY：相对文档的纵向偏移值 
event.offsetX：相对当前对象的横向偏移值 
event.offsetY：相对当前对象的纵向偏移值 
offsetLeft：相对父元素的横向偏移值 
offsetTop：相对父元素的纵向偏移值 
window.screenTop：浏览器相对于屏幕左上角的横向偏移值 
window.screenLeft：浏览器相对于屏幕左上角的纵向偏移值