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 әдісі