getBoundingClientRect方法详解

getBoundingClientRect()方法是DOM API中的一个方法，它返回一个DOMRect对象，表示当前元素的边框（border）左上角相对于浏览器窗口左上角的位置和尺寸。DOMRect对象具有left、top、right、bottom、x、y、width和height属性，可以用来计算元素的位置、大小、距离等信息。

getBoundingClientRect()方法的语法如下：

elem.getBoundingClientRect();

其中，elem表示要获取边界信息的元素。该方法没有参数，调用时直接返回DOMRect对象。

示例代码：

<!DOCTYPE html>
<html>
<head>
	<title>getBoundingClientRect()方法示例</title>
</head>
<body>
	<div id="box">Hello World!</div>
	<script>
		var box = document.getElementById('box');
		var rect = box.getBoundingClientRect();
		console.log(rect);
	</script>
</body>
</html>

运行结果：

DOMRect {x: 8, y: 8, width: 78.359375, height: 16, top: 8, right: 86.359375, bottom: 24, left: 8}

说明：

上述代码中，我们用getElementById()方法获取id为"box"的元素，然后调用getBoundingClientRect()方法获取其边框信息。最后将DOMRect对象输出到控制台。

DOMRect对象的属性说明：

left：元素左边框相对于浏览器窗口左边缘的距离。
top：元素上边框相对于浏览器窗口上边缘的距离。
right：元素右边框相对于浏览器窗口左边缘的距离。
bottom：元素下边框相对于浏览器窗口上边缘的距离。
x：元素左边框相对于浏览器窗口左边缘的距离。
y：元素上边框相对于浏览器窗口上边缘的距离。
width：元素的宽度。
height：元素的高度。

需要注意的是，getBoundingClientRect()方法返回的DOMRect对象的属性值会随着滚动条的滚动而变化。因此，如果要获取元素相对于文档的位置，需要加上滚动条的偏移量。例如：

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var x = rect.left + scrollLeft;
var y = rect.top + scrollTop;

上述代码中，我们首先获取文档的滚动条位置，然后将滚动条的偏移量加上left和top属性值，即可得到元素相对于文档的位置。