De getBoundingClientRect Methode

De methode getBoundingClientRect bevat een object met coördinaten van een element. Coördinaten worden berekend ten opzichte van het zichtbare deel van de pagina zonder rekening te houden met scrollen (ten opzichte van het venster). Dat wil zeggen zoals bij de eigenschap position met de waarde fixed.

In het geretourneerde object zitten de eigenschappen: left, top, right, bottom, width, height. Het is vermeldenswaard dat deze eigenschappen niets te maken hebben met CSS-eigenschappen. Ze bevatten afstanden tot de corresponderende zijden van het element. Voor left/right - vanaf de linkerrand van het zichtbare gebied van de pagina, en voor top/bottom - vanaf de bovenkant.

Syntaxis

element.getBoundingClientRect();

Voorbeeld

Laten we de coördinaten van een element verkrijgen:

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

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

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

Zie ook

eigenschap offsetParent,
die de ouder met positionering bevat
eigenschap offsetTop,
die de offset van het element vanaf de bovenkant bevat
eigenschap offsetLeft,
die de offset van het element vanaf de linkerkant bevat
methode elementFromPoint,
die het element op coördinaten retourneert