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