getBoundingClientRect().top 和 offsetTop 之间的区别？

Question

getBoundingClientRect().top 和 offsetTop 有什么区别？

https://codepen.io/anon/pen/bWZWQg

 const elem = document.querySelector('#find');

console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top);

console.log('offsetTop: ' + elem.offsetTop);

// Stuff to push the div down the page
<div id='find'>Find me</div>

从我的快速测试来看，唯一的区别似乎是返回的小数位数。

原文由 Evanss 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

getBoundingClientRect 为您提供相对于客户端视口的偏移量，而 offsetTop 始终是固定的静态属性。尽管当元素在文档中的实际位置发生变化时它会发生变化。如需真正的说明，请使用笔，您可以自己检查差异。

如果元素在相对容器内，则 offsetTop 将相对于给定的容器 笔

console.log('offsetTop: ' + elem.offsetTop); //This is fixed. it get's calculated from beginning of your page to actual element's position.

console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top); // this will changing while scroll, because it's relative to your current view port.

看到笔，滚动 div，同时检查控制台。

如果元素的容器是相对的那么

console.log('offsetTop: ' + elem.offsetTop) // //This is fixed. it get's calculated from beginning of your top most relative container.

原文由 MehulJoshi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

HTMLElement.offsetTop 只读属性返回当前元素相对于offsetParent节点顶部的距离。

getBoundingClientRect() 是一个非常有用的跨浏览器安全方法，它返回任何元素相对于视口的顶部、右侧、底部和左侧位置。

原文由 Naveen Kumar 发布，翻译遵循 CC BY-SA 3.0 许可协议