getBoundingClientRect-metodi

getBoundingClientRect -metodi sisältää elementin koordinaattiolion. Koordinaatit lasketaan sivun näkyvän osan suhteen ilman skrollaamista (ikkunan suhteen). Eli kuten position -ominaisuudella arvolla fixed.

Palautetussa oliossa on ominaisuudet: left, top, right, bottom, width, height. On syytä huomata, että näillä ominaisuuksilla ei ole mitään yhteyttä CSS-ominaisuuksiin. Ne sisältävät etäisyydet elementin vastaaviin sivuihin. left/right - vasemmalta reunasta näkyvän sivualueen vasempaan reunaan, ja top/bottom - yläreunasta.

Syntaksi

javascriptelementti.getBoundingClientRect();

Esimerkki

Haetaan elementin koordinaatit:

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

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

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

Katso myös