client/offset/scroll等属性不明白（看这就够了） javascript宽高前端

前言我们在移动端的开发过程中，经常会碰到需要获取移动端节点宽高的情况，但是像offsetHeight，offsetTop，clientHeight，clientTop等属性又非常容易混淆，也没法单从单词识别出具体代表什么，笔者曾经想要通过单词来区分，但是当我打开度娘，搜索“clientHeight什么意思”的时候，我只得到了如下的答案（图除了马赛克，没有ps）。我看不懂，但是我大受震撼！从此我放弃了从单词进行识别的想法。

文章图片

今天我们来重新梳理一遍，画了几张图，希望能够让我和你对这些宽高能有一个较为清晰的认识。
说明

body返回的是body节点，即
documentElement返回文档的root节点，即\，在文档类型申明（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
返回获取元素对象内容的实际高度，包括溢出部分的内容

文章图片

参考资料

https://developer.mozilla.org...

其他 【client/offset/scroll等属性不明白（看这就够了）】如果有说错或者画错的地方，请告诉我，我尽快改（捂脸
然后本期对宽高的介绍就到这里了，其实还有一些比如screen.height，availheight，innerHeight等属性，如果大家有兴趣的话，等再给大家画几张图介绍一下～