AWebManCN

Menu

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

有关的属性先列出来:

offsetXXX

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

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

clientXXX

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

scrollXXX

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

xxxTop

区别与联系

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

题外话

书到用时方恨少,我也是在阅读源码的过程中看见很多这样的属性,所以专门写一篇文章来分析一下这几个的区别与联系,最近一直在读的 ElementUI 源码实在是伤脑筋,下一篇就是 Select 组件了,这已经让我看了好几天了,终于快写完了,如果想了解的继续期待一下吧。
作者:_再见萤火虫
链接:https://juejin.im/post/5e81fa5651882573820975b6
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

— 于 共写了979个字
— 文内使用到的标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注