client/offset/scroll等属性不明白？看这就够了

前言

我们在移动端的开发过程中，经常会碰到需要获取移动端节点宽高的情况，但是像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...

其他

如果有说错或者画错的地方，请告诉我，我尽快改（捂脸

然后本期对宽高的介绍就到这里了，其实还有一些比如screen.height，availheight，innerHeight等属性，如果大家有兴趣的话，等再给大家画几张图介绍一下～