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> 

從我的快速測試，唯一的區別似乎是小數的個數返回。

Answer 1

它給你相對於你的客戶端視口的偏移量，意思是如果你滾動元素並看到那麼你可以檢查差異。 pen

console.log('offsetTop: ' + elem.offsetTop); //This is fixed. 

console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top); // this is changing while scroll 

見筆，滾動DIV，然後檢查控制檯。

Answer 2

HTMLElement.offsetTop只讀屬性返回當前元素相對於offsetParent節點頂部的距離。

getBoundingClientRect()是一個非常有用的跨瀏覽器安全方法，它返回任何元素相對於視口的頂部，右側，底部和左側位置。