关于javascript: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：整个浏览器窗口的高度

document 相干宽高属性

相干的有 3 类属性：

• client 相干
• offset 相干
• scroll 相干

client 相干属性

• document.body.clientWidth：body 的宽度（padding + content，不蕴含滚动条）
• document.body.clientHeight: body 的高度

offset 相干属性

• document.body.offsetWidth：body 蕴含 border 的宽度（padding + content + border）
• document.body.offsetHeight：body 蕴含 border 的高度

scroll 相干属性

• document.body.scrollWidth：body 可滚动的宽度，包含 overflow 溢出看不到的内容
• document.body.scrollHeight：body 可滚动的高度，包含 overflow 溢出看不到的内容

documentElement 与应用 body 相似，将以上 body 改为 documentElement，测量宽高的元素就是 html 了。

看个例子，设置了 reset.css 后，设置以后页面的 css

    body {
        font-family: "sans-serif";
        height: 800px;
        border: 40px solid orange !important;
    }

screen 相干宽高属

• screen.width：屏幕宽度，浏览器最大化时的最大宽度
• screen.height：屏幕高度，浏览器最大化时的最大高度
• screen.availWidth：浏览器可应用的屏幕最大程度宽度
• screen.availHeight：浏览器可应用的屏幕最大的垂直高度

如果对你有帮忙的话，点赞、评论、赞叹都是对我的激励，也是反对我写下去的能源，笔芯~

本文原创公布于微信公众号「程序员张晴天」，欢送关注第一工夫获取最新分享，一起提高。

参考文章：

• JavaScript 中的各种宽高属性