Metoden getBoundingClientRect

Metoden getBoundingClientRect innehåller ett objekt med koordinater för ett element. Koordinater beräknas i förhållande till den synliga delen av sidan utan hänsyn till scrollning (i förhållande till fönstret). Det vill säga som med egenskapen position med värdet fixed.

I det returnerade objektet finns egenskaperna: left, top, right, bottom, width, height. Det är värt att notera att dessa egenskaper inte har något gemensamt med CSS-egenskaper. De innehåller avstånd till elementets motsvarande sidor. För left/right - från den vänstra kanten av den synliga området på sidan, och för top/bottom - från den övre.

Syntax

javascriptelement.getBoundingClientRect();

Exempel

Låt oss få koordinaterna för ett element:

html<div id="elem"></div>

css#elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());

Se även