彻底弄清元素的 offsetHeight、scrollHeight、clientHeight...

·  阅读 2047

前言

由于在实际开发中经常遇到 offsetXXXscrollXXXclientXXX 这些属性,但是这些属性之间的差异又不是很大,导致在使用的时候经常混淆它们,接下来,我会用最直观的方式让你一劳永逸。

有关的属性先列出来:

  • offsetWidth/offsetHeight/offsetTop
  • clientWidth/clientHeight
  • scrollWidth/scrollHeight/scrollTop

offsetXXX

首先看一下与 offset 有关的属性:

  • offsetWidth/offsetHeight 是指一个元素的 CSS 「标准宽高」,它包含了边框、内边距、元素内容以及滚动条(如果存在的话)。

借助 MDN 上的图片可以看到元素的 offsetWidth,这就是这个元素在页面中「实际占用的空间」,同时当元素的形状发生变化时(比如说放大或缩小),offsetWidth 就表示元素的布局宽高,并不代表实际渲染出来的宽高,如需获取渲染的宽高请使用 getBoundingClientRect() 方法计算得到真正的 offsetWidth

clientXXX

  • clientWidth/clientHeight 就表示一个元素的「内容宽高」,包含元素内容以及内边距

也就是说如果你只想要获取「显示内容区域的大小」就是用 clientWidth

scrollXXX

  • scrollWidth/scrollHeight 表示一个元素内容区域的实际大小,包括不在页面中的可滚动部分(内容和内边距)

它可以理解为 clientXXX 的增强版,是整个内容的大小

xxxTop

  • offsetTop 是当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系
  • scrollTop 在有滚动条的情况下,为元素可视区域距离元素顶部的像素,也就是已经滚动了多少距离

区别与联系

总结一下这里面的区别和联系:

  • offsetXXX 可以看作是 clientXXX + 外边框 border + 滚动条(有的话)
  • scrollXXX 可以看作是 clientXXX + 隐藏区域大小(如果有滚动的话)

题外话

书到用时方恨少,我也是在阅读源码的过程中看见很多这样的属性,所以专门写一篇文章来分析一下这几个的区别与联系,最近一直在读的 ElementUI 源码实在是伤脑筋,下一篇就是 Select 组件了,这已经让我看了好几天了,终于快写完了,如果想了解的继续期待一下吧。

分类:
前端
标签: