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

javascriptelement.getBoundingClientRect();

Misol

Element koordinatalarini olamiz:

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

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

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

Shuningdek qarang