Difference between getBoundingClientRect().top and offsetTop?

user_467875 0
Viewed 32590

What is the difference between getBoundingClientRect().top and 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>

From my quick test the only difference seems to be the number of decimal places returned.

javascript
3 Answers

The method getBoundingClientRect may not be as good in performance as offsetLeft (doc here), but if you wanna know an element's position after it transformed by CSS, or even still in transition animation, it is the best choice (maybe the only way).
Here is a Related answer.

user_75269890
Related