Różnica między getBoundingClientRect(). Top i offsetTop?

Question

Jaka jest różnica między getBoundingClientRect(). Top i 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> 

Z mojego szybkiego testu jedyną różnicą wydaje się być liczba miejsc po przecinku zwrócone.

Answer 1

Daje przesunięcie względem ekranu roboczego klienta, oznacza, że ​​jeśli przewiniesz element, zobaczysz, że możesz sprawdzić różnicę. pen

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

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

zobaczyć pióro przewiń div, a następnie sprawdzić konsolę.

Answer 2

Właściwość tylko do odczytu zwraca wartość odległości bieżącego elementu względem wierzchołka węzła offsetParent.

getBoundingClientRect() to bardzo przydatna, bezpieczna metoda przeglądarki, która zwraca górną, prawą, dolną i lewą pozycję dowolnego elementu względem rzutni.