getBoundingClientRect usuli

getBoundingClientRect usuli element koordinatalari ob'ektini o'z ichiga oladi. Koordinatalar skrolni hisobga olmagan holda sahifaning ko'rinadigan qismiga nisbatan hisoblanadi (oynaga nisbatan). Ya'ni position xususiyatidagi fixed qiymatiga o'xshab.

Qaytarilgan ob'ektda quyidagi xususiyatlar mavjud: left, top, right, bottom, width, height. Shuni ta'kidlash kerakki, bu xususiyatlar CSS xususiyatlari bilan hech qanday bog'liq emas. Ularda elementning mos tomonlarigacha bo'lgan masofalar mavjud. left/right uchun - sahifaning ko'rinadigan qismining chap chegarasidan, top/bottom uchun - esa yuqori chegarasidan.

Sintaksis

element.getBoundingClientRect();

Misol

Element koordinatalarini olamiz:

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

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

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

Shuningdek qarang

offsetParent xususiyati,
bu pozitsiyalashgan ota-onani o'z ichiga oladi
offsetTop xususiyati,
bu elementning yuqori siljishini o'z ichiga oladi
offsetLeft xususiyati,
bu elementning chap siljishini o'z ichiga oladi
elementFromPoint usuli,
bu koordinatalar bo'yicha elementni qaytaradi