JavaScript getBoundingClientRect() 方法详解 - 获取元素位置和尺寸 - 常规

JavaScript getBoundingClientRect() 方法详解 - 获取元素位置和尺寸

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

语法

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}

属性说明

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 属性值，即可得到元素相对于文档的位置。

总结

getBoundingClientRect() 方法是一个非常实用的 DOM 方法，可以帮助我们获取元素的位置和尺寸信息，方便进行各种计算和布局操作。在实际开发中，我们可以根据需要结合滚动条偏移量，获取元素相对于文档或其他元素的位置信息。

JavaScript getBoundingClientRect() 方法详解 - 获取元素位置和尺寸