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 методи,
у координаталар бўйича элементни қайтаради