getBoundingClientRect Metodu

getBoundingClientRect metodu, elementin koordinatlarını içeren bir nesne döndürür. Koordinatlar, sayfanın kaydırma dikkate alınmadan görünür kısmına göre hesaplanır (pencereye göre). Yani position özelliğinin fixed değerindeki gibi.

Döndürülen nesnede şu özellikler bulunur: left, top, right, bottom, width, height. Bu özelliklerin CSS özellikleriyle hiçbir ilgisi olmadığını belirtmek gerekir. Bunlar, elementin ilgili kenarlarına olan mesafeleri içerir. left/right için - sayfanın görünür alanının sol kenarından, top/bottom için ise üst kenarından.

Sözdizimi

element.getBoundingClientRect();

Örnek

Elementin koordinatlarını alalım:

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

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

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

Ayrıca Bakınız

konumlandırmalı ebeveyni içeren offsetParent özelliği
elementin üstten ofsetini içeren offsetTop özelliği
elementin soldan ofsetini içeren offsetLeft özelliği
koordinatlara göre elementi döndüren elementFromPoint metodu