js/jquery获取文档宽高

1.首先讲一下width、clientWidth、offsetWidth、scrollWidth区别

style.width 元素width
style.height 元素height
clientWidth 元素width+padding
clientHeight 元素height+padding
offsetWidth 元素width+padding+border
offsetHeight 元素height+padding+border
scrollWidth 元素width+padding+border(html情况下)+溢出尺寸,无溢出的情况与clientWidth相同
scrollHeigh 元素height+padding+border(html情况下)+溢出尺寸,无溢出的情况与clientHeigh相同

2.js/jquery获取文档宽高

window.screen.availWidth屏幕可用工作区宽度
window.screen.availHeight屏幕可用工作区高度(除电脑底部导航栏)
window.screen.width屏幕分辨率的宽
window.screen.height屏幕分辨率的高
window.screenLeft浏览器相对于屏幕的X坐标
window.screenTop浏览器相对于屏幕的Y坐标
window.screenX浏览器相对于屏幕的X坐标(Firefox)
window.screenY浏览器相对于屏幕的Y坐标(Firefox)
document.documentElement.clientWidth / $(window).width()浏览器可视窗口宽度
window.innerWidth浏览器可视窗口宽度(包含滚动条,一般不用)
document.documentElement.clientHeight / $(window).height()浏览器可视窗口高度
window.innerHeight浏览器可视窗口高度(包含滚动条,一般不用)
document.documentElement.scrollLeft / $(window).scrollLeft()网页被卷的宽度
window.pageXOffset网页被卷的宽度(IE9+)
document.documentElement.scrollTop / $(window).scrollTop()网页被卷的高度
window.pageYOffset网页被卷的高度(IE9+)
document.documentElement.scrollWidth/offsetWidth / $(document).width()整个文档宽度
document.documentElement.scrollHeight/offsetHeight / $(document).height()整个文档高度

原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。