Метод getBoundingClientRect

Методът getBoundingClientRect съдържа обект с координати на елемента. Координатите се изчисляват спрямо видимата част на страницата, без да се отчита скролването (спрямо прозореца). Това означава, че са като при свойството position със стойност fixed.

Върнатият обект съдържа свойства: left, top, right, bottom, width, height. Важно е да се отбележи, че тези свойства нямат нищо общо с CSS свойствата. В тях се съдържат разстоянията до съответните страни на елемента. За left/right - от лявата граница на видимата област на страницата, а за top/bottom - от горната.

Синтаксис

елемент.getBoundingClientRect();

Пример

Нека получим координатите на елемент:

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

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

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

Вижте също

свойство offsetParent,
което съдържа родител с позициониране
свойство offsetTop,
което съдържа отстъп на елемента отгоре
свойство offsetLeft,
което съдържа отстъп на елемента отляво
метод elementFromPoint,
който връща елемент по координати