遍历不能遍历的getBoundingClientRect对象
本帖最后由 马黑黑 于 2025-3-12 23:02 编辑 <br /><br /><style>.pa {
margin: 20px auto;
width: 600px;
height: 240px;
border: 1px solid gray;
padding: 20px;
box-sizing: border-box;
}
</style>
<p>JS内置的API getBoundingClientRect 基于元素级，它将返回一个DOMRect 即盒子模型的矩形相关数据对象，该对象提供元素盒子的矩形相关的属性值，如方位、尺寸等信息。DOMRect对象返回的信息有限但非常有用，但是不可以迭代，因此可以考虑使用变通的方式遍历它返回的所有数据。下面的代码设置一个数组，数组元素所对应的属性正是 DOMRect 对象返回的键名但最后一个数组元素 margin 不属于它返回的对象信息范畴（因此演示效果中它的值是 undefined），然后通过遍历数组读取对所有的 DOMRect 对象返回的信息并将结果显示在被检测的div元素中：</p>
<div id="hEdiv"><pre id="hEpre">
<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，`;
});
pa.innerText = msg;
</script>
</pre></div>
<p>效果：</p>
<div class="pa"></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
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}，`;
});
pa.textContent = msg;
</script> 从效果上看，x 和 left 都是基于浏览器视口，从浏览器都左边缘到元素的左上角、左边缘的像素距离，y 和 top、right 和 bottom 同理，参照依据是浏览器视口上边缘和元素左上角、上边缘以及盒子的右边缘、下边缘，width 和 height 是盒子的宽与高，共8个属性。
CSS代码中，.pa 选择器的 box-sizing 使用 border-box 值，此值将盒子定义为盒子宽高纳入 padding（内边距）和 border（边框）尺寸，盒子的总宽度包含内边距+边框尺寸在内，不论边框内边距设置多大，就不会超越width属性所设置的值，高度与此同理。 谢谢老师辛苦，学习了！ 这个知识点有点深啊，只知道x和left的值一样，y和top值一样，其他的数值不知道有什么用{:4_173:} 放大或缩小屏幕显示后，发现xy是变化的呢。 不对，貌似不是因为放大缩小屏幕，好像刷新后x y 的值就变了？
尤其y值，理论上不应该变啊。
实在是不明白怎么回事了{:4_173:} 看标题就要有十页说明书的感觉。。{:4_170:}
等会有事，先狠狠支持一下。
回头细看 花飞飞 发表于 2025-3-13 18:18
看标题就要有十页说明书的感觉。。
等会有事，先狠狠支持一下。
回头细看
{:4_191:} 梦江南 发表于 2025-3-13 07:59
谢谢老师辛苦，学习了！
{:4_190:} 红影 发表于 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
这些可能是动态变化的：因为它针对浏览器视口。浏览器发生尺寸改变，里面的东东位置和尺寸都可能跟着发生 ...
可是我没动过，只要刷新，它就变化了{:4_203:} 红影 发表于 2025-3-13 22:16
是的，这些是它的基本属性呢。
就是酱紫的 红影 发表于 2025-3-13 22:18
可是我没动过，只要刷新，它就变化了
你刷新的时候，被检测的盒子在不同的地方，得到的结果就不会一样。
举个通俗的例子加以说明：
假如你坐床上，你的床头墙壁是视口上边缘，这时，你坐在床头、床中、双尾，你离开视口上边缘的数据是不一样的。
刷新的时候，你在何处刷新，刷新完了你就在何处，这好比你坐在床的头、中、尾一样 马黑黑 发表于 2025-3-14 19:26
就是酱紫的
嗯嗯，从来不知道还能让盒子的数学展示出来，学习了{:4_187:} 马黑黑 发表于 2025-3-14 19:31
你刷新的时候，被检测的盒子在不同的地方，得到的结果就不会一样。
举个通俗的例子加以说明：
原来刷新还能让盒子移位，这个从来没想过也不知道呢。