Phương thức getBoundingClientRect

Phương thức getBoundingClientRect chứa đối tượng tọa độ phần tử. Tọa độ được tính toán tương đối với phần nhìn thấy của trang mà không tính đến việc cuộn (tương đối với cửa sổ). Tức là giống như thuộc tính position với giá trị fixed.

Đối tượng trả về chứa các thuộc tính: left, top, right, bottom, width, height. Cần lưu ý rằng các thuộc tính này không có liên quan gì đến các thuộc tính CSS. Chúng chứa khoảng cách đến các cạnh tương ứng của phần tử. Đối với left/right - từ cạnh trái của vùng nhìn thấy trang, còn đối với top/bottom - từ cạnh trên.

Cú pháp

phần tử.getBoundingClientRect();

Ví dụ

Hãy lấy tọa độ phần tử:

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

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

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

Xem thêm

thuộc tính offsetParent,
chứa phần tử cha có định vị
thuộc tính offsetTop,
chứa khoảng lệch của phần tử từ trên
thuộc tính offsetLeft,
chứa khoảng lệch của phần tử từ trái
phương thức elementFromPoint,
trả về phần tử theo tọa độ