前言
我们在移动端的开发过程中，经常会碰到需要获取移动端节点宽高的情况，但是像offsetHeight，offsetTop，clientHeight，clientTop等属性又非常容易混淆，也没法单从单词识别出具体代表什么，笔者曾经想要通过单词来区分，但是当我打开度娘，搜索“clientHeight什么意思”的时候，我只得到了如下的答案（图除了马赛克，没有ps）。我看不懂，但是我大受震撼！从此我放弃了从单词进行识别的想法。
今天我们来重新梳理一遍，画了几张图，希望能够让我和你对这些宽高能有一个较为清晰的认识。
说明
- body返回的是body节点，即<body\>
documentElement返回文档的root节点，即\<html\>，在文档类型申明（DTD，Document Type Definition）后使用
为了兼容一般写成:
// 例子： const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;- 本篇文章为了描写方便，统一使用body来表达
client 相关的属性
- clientHeight
- clientWidth
返回页面上元素可见区域宽高的值，只读属性，不包含边框、滚动条或外边距（margin
- clientTop
- clientLeft
返回页面上元素边框的值，只读属性，返回的是一个四舍五入后的整数
offset 相关的属性
offset的意思为“偏离、位移”，在js中也有一系列的属性。
- offsetHeight
- offsetWidth
返回页面上可视区域元素的宽高的值，只读属性，不包含外边距（margin
- offsetTop
- offsetLeft
返回元素与最近的一个具有定位position的祖宗元素relative，absolute，fixed的距离，若祖宗元素都不符合条件，则该元素offsetParent为body
scroll 相关的属性
- scrollTop
返回元素被卷去的高度，或者说已滑动的距离，可写属性（只在有滚动条的情况下有值，否则其值为0 - scrollHeight
返回获取元素对象内容的实际高度，包括溢出部分的内容
参考资料
其他
如果有说错或者画错的地方，请告诉我，我尽快改（捂脸
然后本期对宽高的介绍就到这里了，其实还有一些比如screen.height，availheight，innerHeight等属性，如果大家有兴趣的话，等再给大家画几张图介绍一下～