JS: getBoundingClientRect()方法简介
<style>.showBox { font-size: 18px; }
.showBox p { margin: 10px 0; }
.showBox code, .showBox pre { background: #eee; padding: 2px 6px; tab-size: 4; }
.showBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.showBox pre code { padding: 0; background: none; }
.showBox blockquote { border-left: 3px solid #87cefa; }
.showBox table { border-collapse: collapse; white-space: pre-wrap; box-sizing: border-box; }
.showBox th, .showBox td { padding: 8px 10px; border: 1px solid #999; }
.showBox th { text-align: center; }
</style>
<div class="showBox">
<p>getBoundingClientRect()方法基于元素，用于获取元素的DOMRect对象信息，语法为：</p>
<pre><code>元素.getBoundingClientRect();
</code></pre>
<p>设若有一个 id="mydiv" 的HTML元素，我们要获取其DOMRect对象的数据，可以这样：</p>
<pre><code>const rect = mydiv.getBoundingClientRect();
</code></pre>
<p>对象变量 rect 将得到八个基于 mydiv 元素的矩形相关属性值，它们是：</p>
<table>
<thead>
<tr>
<th align="center" width="80">序号</th>
<th width="120">属性名称</th>
<th width="260">说明</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td>top</td>
<td>元素顶部边界相对于视口顶部的距离</td>
<td></td>
</tr>
<tr>
<td align="center">2</td>
<td>y</td>
<td>同top属性</td>
<td></td>
</tr>
<tr>
<td align="center">3</td>
<td>right</td>
<td>元素右边界相对于视口左侧的距离</td>
<td></td>
</tr>
<tr>
<td align="center">4</td>
<td>bottom</td>
<td>元素底部边界相对于视口顶部的距离</td>
<td></td>
</tr>
<tr>
<td align="center">5</td>
<td>left</td>
<td>元素左边界相对于视口左侧的距离</td>
<td></td>
</tr>
<tr>
<td align="center">6</td>
<td>x</td>
<td>同left属性</td>
<td></td>
</tr>
<tr>
<td align="center">7</td>
<td>width</td>
<td>元素宽度，不包含边框和外边距</td>
<td></td>
</tr>
<tr>
<td align="center">8</td>
<td>height</td>
<td>元素高度，不包含边框和外边距</td>
<td></td>
</tr>
</tbody></table>
<p>以上8个属性均为HTML属性，所以它们返回的值是纯数据，不带px单位。例如想知道 id="mydiv" 的宽度，<code>console.log(rect.width)</code>，这将在控制台打印出类似 1200 的数值。 </p>
<p>getBoundingClientRect()方法提供的这些元素的属性在Web开发中用途极广，值得学习掌握。</p>
</div> 谢谢黑黑老师辛苦，学习了！{:4_187:} 梦江南 发表于 2026-2-28 10:28
谢谢黑黑老师辛苦，学习了！
看得懂不？ 马黑黑 发表于 2026-2-28 12:09
看得懂不？
序号框里的八属性有点知道。 top、right、bottom说明好像有误？ 梦江南 发表于 2026-2-28 12:16
序号框里的八属性有点知道。
{:4_190:} 彩云归 发表于 2026-2-28 12:36
top、right、bottom说明好像有误？
top有误（已改，谢谢提醒），其余没有。所有的参照都基于左上角坐标，所以，元素底部、右部分别以应视口顶端、视口左端为参照。 马老师几下午好！有了您的解析，我更清楚了，，谢谢您！{:4_204:}{:4_190:}
与之对照 top、width、height 似乎有所出入。
也曾年轻 发表于 2026-2-28 16:21
与之对照 top、width、height 似乎有所出入。
以 bottom 属性值为例，我的表述是这样：
bottom 元素底部边界相对于视口顶部的距离
底部边界到顶端的距离，恰好等于 top 属性值 + height 属性值 霜染枫丹 发表于 2026-2-28 16:03
马老师几下午好！有了您的解析，我更清楚了，，谢谢您！
这个是JS的东东，如果没有JS操纵能力，略微了解就可以了 马黑黑 发表于 2026-2-28 20:10
以 bottom 属性值为例，我的表述是这样：
bottom 元素底部边界相对于视口顶部的距离
bottom 没问题， 是 top width height
马黑黑 发表于 2026-2-28 20:11
这个是JS的东东，如果没有JS操纵能力，略微了解就可以了
我能记住它们的样子，说的是什么，就像看PS的工具，字母我就当作象形图片来认，读不出来，按字母顺序也背不下来。您的帖子给解析了出来，就更清晰了。学您的代码时我就关注有数字的项，把您的代码中的数字改动一下，看画面是哪里在变化，然后就知道了数字前面的代码的作用，多看几遍记住样子。虽然笨了点，我也没更好的办法，对我却是很实用，不管所以然，只管效果。{:4_173:}
霜染枫丹 发表于 2026-2-28 20:38
我能记住它们的样子，说的是什么，就像看PS的工具，字母我就当作象形图片来认，读不出来，按字母顺序也背 ...
这个东东，能用上就用，不能用上路过就行 也曾年轻 发表于 2026-2-28 20:34
bottom 没问题， 是 top width height
那是我表述中手误，我再改改。谢谢提醒。 这个厉害了，能一下子得出这么多数据{:4_187:} 红影 发表于 2026-2-28 23:22
这个厉害了，能一下子得出这么多数据
还有更厉害的，明天写出来
页:
[1]