遍历不能遍历的getBoundingClientRect对象

马黑黑

JS内置的API getBoundingClientRect 基于元素级，它将返回一个DOMRect 即盒子模型的矩形相关数据对象，该对象提供元素盒子的矩形相关的属性值，如方位、尺寸等信息。DOMRect对象返回的信息有限但非常有用，但是不可以迭代，因此可以考虑使用变通的方式遍历它返回的所有数据。下面的代码设置一个数组，数组元素所对应的属性正是 DOMRect 对象返回的键名但最后一个数组元素 margin 不属于它返回的对象信息范畴（因此演示效果中它的值是 undefined），然后通过遍历数组读取对所有的 DOMRect 对象返回的信息并将结果显示在被检测的div元素中：

<style>
.pa {
	margin: 20px auto;
	width: 600px;
	height: 240px;
	border: 1px solid gray;
	padding: 20px;
	box-sizing: border-box;
}
</style>

<div class="pa"></div>

<script>
const pa = document.querySelector('.pa');
const rect = pa.getBoundingClientRect();
const vals = ['x', 'y', 'top', 'right', 'bottom', 'left', 'width', 'height', 'padding'];
let msg = '';
vals.forEach(v => {
	msg += `${v}: ${rect[v]，`;
});
pa.innerText = msg;
</script>

效果：

马黑黑

从效果上看，x 和 left 都是基于浏览器视口，从浏览器都左边缘到元素的左上角、左边缘的像素距离，y 和 top、right 和 bottom 同理，参照依据是浏览器视口上边缘和元素左上角、上边缘以及盒子的右边缘、下边缘，width 和 height 是盒子的宽与高，共8个属性。

CSS代码中，.pa 选择器的 box-sizing 使用 border-box 值，此值将盒子定义为盒子宽高纳入 padding（内边距）和 border（边框）尺寸，盒子的总宽度包含内边距+边框尺寸在内，不论边框内边距设置多大，就不会超越width属性所设置的值，高度与此同理。

梦江南

谢谢老师辛苦，学习了！

红影

这个知识点有点深啊，只知道x和left的值一样，y和top值一样，其他的数值不知道有什么用

红影

放大或缩小屏幕显示后，发现xy是变化的呢。

红影

不对，貌似不是因为放大缩小屏幕，好像刷新后x y 的值就变了？
尤其y值，理论上不应该变啊。

红影

实在是不明白怎么回事了

花飞飞

看标题就要有十页说明书的感觉。。
等会有事，先狠狠支持一下。
回头细看

马黑黑

花飞飞 发表于 2025-3-13 18:18
看标题就要有十页说明书的感觉。。
等会有事，先狠狠支持一下。
回头细看

马黑黑

梦江南 发表于 2025-3-13 07:59
谢谢老师辛苦，学习了！

马黑黑

红影 发表于 2025-3-13 13:09
这个知识点有点深啊，只知道x和left的值一样，y和top值一样，其他的数值不知道有什么用

矩形盒子相关的属性，无外乎 左上角XY坐标、上右下左、宽高

马黑黑

红影 发表于 2025-3-13 13:15
实在是不明白怎么回事了

举个例子说明一下：有这么一个需求，将盒子B严丝无缝覆盖盒子A，那么，需要不需要获得盒子A的位置和尺寸？这个API就是干这事的，拿到盒子A的位置和尺寸数据。拿到后，我们就可以将B做成和A一样的尺寸然后放到A的位置以实现目标

马黑黑

红影 发表于 2025-3-13 13:13
不对，貌似不是因为放大缩小屏幕，好像刷新后x y 的值就变了？
尤其y值，理论上不应该变啊。

这些可能是动态变化的：因为它针对浏览器视口。浏览器发生尺寸改变，里面的东东位置和尺寸都可能跟着发生变化

红影

马黑黑 发表于 2025-3-13 19:54
矩形盒子相关的属性，无外乎 左上角XY坐标、上右下左、宽高

是的，这些是它的基本属性呢。

红影

马黑黑 发表于 2025-3-13 19:57
举个例子说明一下：有这么一个需求，将盒子B严丝无缝覆盖盒子A，那么，需要不需要获得盒子A的位置和尺寸 ...

也就是说这个实际反应的是原来盒子的真实情况的。

红影

马黑黑 发表于 2025-3-13 19:58
这些可能是动态变化的：因为它针对浏览器视口。浏览器发生尺寸改变，里面的东东位置和尺寸都可能跟着发生 ...

可是我没动过，只要刷新，它就变化了

马黑黑

红影 发表于 2025-3-13 22:16
是的，这些是它的基本属性呢。

就是酱紫的

马黑黑

红影 发表于 2025-3-13 22:18
可是我没动过，只要刷新，它就变化了

你刷新的时候，被检测的盒子在不同的地方，得到的结果就不会一样。

举个通俗的例子加以说明：

假如你坐床上，你的床头墙壁是视口上边缘，这时，你坐在床头、床中、双尾，你离开视口上边缘的数据是不一样的。

刷新的时候，你在何处刷新，刷新完了你就在何处，这好比你坐在床的头、中、尾一样

红影

马黑黑 发表于 2025-3-14 19:26
就是酱紫的

嗯嗯，从来不知道还能让盒子的数学展示出来，学习了

红影

马黑黑 发表于 2025-3-14 19:31
你刷新的时候，被检测的盒子在不同的地方，得到的结果就不会一样。

举个通俗的例子加以说明：

原来刷新还能让盒子移位，这个从来没想过也不知道呢。