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

elementti.getBoundingClientRect();

Esimerkki

Haetaan elementin koordinaatit:

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

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

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

Katso myös

ominaisuus offsetParent,
joka sisältää positiointivanhemman
ominaisuus offsetTop,
joka sisältää elementin yläpuolisen offsetin
ominaisuus offsetLeft,
joka sisältää elementin vasemmanpuolisen offsetin
metodi elementFromPoint,
joka palauttaa elementin koordinaattien perusteella