JS获取屏幕宽高属性总结

平时在写界面获取屏幕、浏览器宽高时，经常会搞不清楚window、body、screen中的clientWidth、offsetWidth、width的区别，今天做一个总结帮助自己理解。

window、document、screen、body、documentElement的关系

window是浏览器中JavaScript的顶层对象，所有全局变量与函数都是window对象的成员，而document也是window的对象，表示当前的浏览器载入的网页（DOM树）。比如像window.alert() = alert()、window.document.body.clientWidth=document.body.clientWidth。

screen也是window的对象，表示当前浏览器所在的屏幕。

documentElement和body，前者是指文档的html元素对象，后者指文档的body对象

window相关宽高属性

• innerWidth：浏览器窗口内部宽度（包含垂直滚动条）
• innerHeight：浏览器窗口内部高度（包含水平滚动条）
• outerWidth：整个浏览器窗口的宽度
• outerHeight：整个浏览器窗口的高度

d