HTML | DOM getBoundingClientRect() 方法(1)

📌 相关文章

📜 HTML | DOM getBoundingClientRect() 方法(1)

📅 最后修改于: 2023-12-03 15:31:11.836000 🧑 作者: Mango

HTML | DOM getBoundingClientRect() 方法

简介

getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。该方法返回一个DOMRect对象，该对象具有四个属性：left, top, right和bottom。该方法非常有用，因为它可以轻松地获取元素的尺寸和位置，并且通常用于计算元素的拖动，调整大小和动画效果。

语法

var rectObject = element.getBoundingClientRect();

参数

该方法没有参数。

返回值

返回一个DOMRect对象，该对象包含元素的位置和尺寸属性。

| 属性 | 描述 | | --------- | -------------------------------------------| | top | 元素顶部的Y坐标，即其位于顶部边缘高于视口顶部的像素数 | | right | 元素右侧的X坐标，即其位于右侧边缘高于视口左侧的像素数 | | bottom | 元素底部的Y坐标，即其位于底部边缘高于视口顶部的像素数 | | left | 元素左侧的X坐标，即其位于左侧边缘高于视口左侧的像素数 | | width | 元素宽度的像素值，包括所有的padding | | height | 元素高度的像素值，包括所有的padding |

示例

下面是一个示例代码片段，它演示如何使用getBoundingClientRect()方法获取元素的位置和尺寸，并将其用于CSS动画效果。

<!DOCTYPE html>
<html>
<head>
	<title>Using getBoundingClientRect()</title>
	<style type="text/css">
		#box {
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);	
		}	
	</style>
</head>
<body>
	<div id="box"></div>

	<script type="text/javascript">
		var box = document.getElementById('box');
		var rect = box.getBoundingClientRect();

		setInterval(function() {
			box.style.top = rect.top + Math.random()*400 - 200 + 'px';
			box.style.left = rect.left + Math.random()*400 - 200 + 'px';
		}, 2000);
	</script>
</body>
</html>

在这个示例中，我们首先通过document.getElementById()方法获取了id为box的元素，然后使用getBoundingClientRect()获取该元素的位置和尺寸，并将其存储在一个变量rect中。接下来，我们使用setInterval()方法来定期更改元素的位置。具体来说，我们使用Math.random()方法生成一个介于-200和200之间的随机数，并将其分别添加到元素的上下左右位置。因为元素的位置是相对于视口而不是文档的，所以我们需要将这个随机数添加到原始位置（即rect.top和rect.left），而不是像素位置。

总结

getBoundingClientRect()方法是一个非常有用的方法，它可以轻松地获取元素的位置和尺寸，并可用于各种动画效果。注意，该方法返回的DOMRect对象的属性是相对于视口的，因此在使用时需要注意这一点。