关于javascript:clientoffsetscroll等属性不明白看这就够了

前言

咱们在挪动端的开发过程中，常常会碰到须要获取挪动端节点宽高的状况，然而像 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
  返回获取元素对象内容的理论高度，包含溢出局部的内容

参考资料

• https://developer.mozilla.org…

其余

如果有说错或者画错的中央，请通知我，我尽快改（捂脸

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