Metode getBoundingClientRect

Metode getBoundingClientRect berisi objek koordinat elemen. Koordinat dihitung relatif terhadap bagian halaman yang terlihat tanpa mempertimbangkan pengguliran (relatif terhadap jendela). Artinya seperti pada properti position dalam nilai fixed.

Dalam objek yang dikembalikan terdapat properti: left, top, right, bottom, width, height. Perlu dicatat bahwa properti ini tidak memiliki hubungan apa pun dengan properti CSS. Di dalamnya terdapat jarak ke sisi elemen yang sesuai. Untuk left/right - dari batas kiri area yang terlihat pada halaman, dan untuk top/bottom - dari atas.

Sintaks

elemen.getBoundingClientRect();

Contoh

Dapatkan koordinat elemen:

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

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

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

Lihat juga

properti offsetParent,
yang berisi induk dengan posisi
properti offsetTop,
yang berisi offset elemen dari atas
properti offsetLeft,
yang berisi offset elemen dari kiri
metode elementFromPoint,
yang mengembalikan elemen berdasarkan koordinat