offsetWidth offsetHeight offsetTop offsetLeft scrollTop scrollLeft clientTop clientWidth

最新推荐文章于 2023-12-22 16:28:01 发布

原创最新推荐文章于 2023-12-22 16:28:01 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

该博客主要介绍了JavaScript中元素尺寸与位置相关属性。包括offsetWidth、offsetHeight的计算方式，offsetTop、offsetLeft相对于父元素的偏移量，scrollHeight滚动条高度，scrollTop获取页面滚动位置及兼容写法，还有clientWidth表示的可视宽度。

1、offsetWidth、offsetHeight

offsetWidth:（border-left+border-right+padding-left+padding-right+width）

以此类推

offsetHeight=border-top+border-bottom+padding-top+padding-bottom +height

2.offsetTop offsetLeft scrollHeight

offsetLeft :(偏移量left 当前元素相对于父元素(margin-left+padding-left+border-left+width))

offsetTop :(偏移量top 当前元素相对于父元素(margin-left+padding-left+border-left+width))

scrollHeight：滚动条的高度

3.scrollTop

scrollTop 在JavaScript中获取当前页面的滚动位置（获取浏览器ScrollTop ps:scrollTop是指某个可滚动区块向下滚动的距离）
兼容写法(var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;)