关于获取浏览器的宽高方法的整理

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

一、写在前面

浏览器关于获取宽高的方法实在是太多了，而且每一种获取宽高方法都有它的独特含义，开发的时候需要获取浏览器宽高时，如果不清楚其中的差别，直接从网上抄下来，很有可能达不到自己的目的。

所以我花时间去认真的学习和研究了各种宽高获取方法的差异，并且通过图示来让大家更好的理解它们的含义。

另外，我写了一个网页，里面展示了下面提到的所有方法获取到的值，可以作为一种观察和理解的工具：点我传送

二、方法的分类

获取屏幕宽高的方法可以分为两类：

通过 document.body 元素获取宽高；
通过 window 对象提供的属性来获取宽高。

两者很重要的区别是：document.body属于文档流中的元素，得到的宽高一定是无法脱离文档流限制区域的，是会受页面内容影响；

而通过window对象，如 window.screen 属性获取的宽高，和文档内容无关，不关你渲染什么内容都无法影响这个值。

二、快捷参考表格

元素

方法	含义
document.body.clientWidth/clientHeight	元素真实宽高 + padding，不包含border、margin等
document.body.offsetWidth/offsetHeight	元素真实宽高 + padding + margin + border + 滚动条
document.body.scrollWidth/scrollHeight	元素内部滚动内容的宽高，注意是元素内部的滚动
document.documentElement.scrollTop/scrollLeft	流布局下，浏览器滚动内容（滚动条）距离顶部/左侧的位置

window对象

方法	含义
window.screen.width/height	屏幕宽高，包含任务栏等系统占用屏幕的空间大小
window.screen.availWidth/availHeight	屏幕宽高，不包含任务栏等系统占用屏幕的空间大小
window.innerWidth/innerHeight	浏览器宽高，包含滚动条大小，不包含浏览器标签栏、收藏夹、控制台等控件大小
window.screen.outerWidth/outerHeight	浏览器宽高，包含浏览器标签栏、收藏夹、控制台等控件大小

三、结合图列展开说说

1、document.body.clientWidth 和 document.bodyclientHeight

clientWidth/clientHeight 指元素的不包含边框（border）、外边距（margin）和滚动条（如果存在滚动条），但包含内边距（padding）的宽高。

client

clientWidth不仅可以作用在body上，它使用于任何页面元素，但内联元素该属性为0：

<span id="app">内容</span>

document.getElementById('app').clientWidth // 0
// 即使span存在内容撑起的宽高，但因为时内联元素，所以无法获取clientWidth

2、document.body.offsetWidth 和 document.body.offsetHeight

和clientWidth/clientHeight类似，也是获取元素的宽高，但offsetWidth/offsetHeight包含元素的内外边距、边框和滚动条宽高，也就是整个盒模型的宽高。

offset

还有一点和clientWidth不同，获取的宽高是布局占位的宽高，内联元素同样可以获取到数值。

<span id="app">内容</span>

document.getElementById('app').offsetWidth // 21
// 能够正确获取内联元素的宽度

3、document.body.scrollWidth 和 document.body.scrollHeight

scrollWidth/scrollHeight 是指元素内部滚动内容的宽高。

也就意味着元素的宽高应该是固定的（或者有最大值），并且 overflow 属性不是hidden，保证元素内部内容超出元素大小后，可以出现滚动条，如果元素没有滚动条，则scrollWidth的值和clientWidth的值相等。

scroll

注意：一般页面没有调整样式，页面内容堆叠超出浏览器高度，出现滚动条时，实际上是 html根节点 出现的滚动条，而不是body的，body是被撑开的，所以获取document.body.scrollHeight时依然和clientHeight数值一致。

说到滚动内容的宽高了，那就顺便提及一下元素滚动的距离：scrollTop和scrollLeft。

两者表示元素内部滚动后，滚动条（滚动内容）距离元素顶部和左侧的距离，

需要注意的是：上面说到页面堆叠溢出浏览器高度时，body是被撑开的，真实的滚动元素应该是html，因此想要获取到正确的浏览器滚动距离，应该要使用 document.documentElement.scrollTop，而不是 document.body.scrollTop，document.documentElement指代的是<html>元素。

在查找相关资料的时候，很多关于 document.documentElement.scrollTop 和 document.body.scrollTop 的文章，大多数提到chrome只认document.body.scrollTop，以及移动浏览器和PC浏览器对两者的兼容，不过在今天我测试看来，无论是chrome还是移动PC浏览器，对于标准 document.documentElement.scrollTop都是认可的了。

如果对于 document.documentElement的使用仍有疑虑，可以使用 document.scrollingElement 进行页面滚动宽高的获取和设置。

scroll