两张图详解解元素位置宽度的属性(offsetHeight/ClientHeight/ScrollHeight/getBoundingClientRect)

  • offsetWidth/offsetHeight 返回值包含content + padding + border,效果与 e.getBoundingClientRect()相同
  • clientWidth/clientHeight 返回值只包含content + padding,如果有滚动条,也不包含滚动条
  • scrollWidth/scrollHeight 返回值包含content + padding + 溢出内容的尺寸

getBoundingClientRect (IE67的left、top会少2px,并且没有width、height属性)可以用来获取元素位置, 比如我经常用来获取滚动之后元素距离顶端的距离为0来判断 是否滚动到元素这个位置,然后把头部设置为fixed,比如div.getBoundingClientRect().top。 当然上面的属性也可以做到比如: 页面元素距离浏览器工作区顶端的距离 (div.getBoundingClientRect().top) = div.offsetTop – (document.documentElement.scrollTop || document.body.scrollTop)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券