JS: getBoundingClientRect()方法简介

马黑黑 · 发表于 2026-2-28 09:25

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

getBoundingClientRect()方法基于元素，用于获取元素的DOMRect对象信息，语法为：

元素.getBoundingClientRect();

设若有一个 id="mydiv" 的HTML元素，我们要获取其DOMRect对象的数据，可以这样：

const rect = mydiv.getBoundingClientRect();

对象变量 rect 将得到八个基于 mydiv 元素的矩形相关属性值，它们是：

序号	属性名称	说明
1	top	元素顶部边界相对于视口顶部的距离
2	y	同top属性
3	right	元素右边界相对于视口左侧的距离
4	bottom	元素底部边界相对于视口顶部的距离
5	left	元素左边界相对于视口左侧的距离
6	x	同left属性
7	width	元素宽度，不包含边框和外边距
8	height	元素高度，不包含边框和外边距

以上8个属性均为HTML属性，所以它们返回的值是纯数据，不带px单位。例如想知道 id="mydiv" 的宽度，console.log(rect.width)，这将在控制台打印出类似 1200 的数值。

getBoundingClientRect()方法提供的这些元素的属性在Web开发中用途极广，值得学习掌握。

梦江南 · 发表于 2026-2-28 10:28

谢谢黑黑老师辛苦，学习了！

马黑黑 · 发表于 2026-2-28 12:09

梦江南发表于 2026-2-28 10:28
谢谢黑黑老师辛苦，学习了！

看得懂不？

梦江南 · 发表于 2026-2-28 12:16

马黑黑发表于 2026-2-28 12:09
看得懂不？

序号框里的八属性有点知道。

彩云归 · 发表于 2026-2-28 12:36

top、right、bottom说明好像有误？

马黑黑 · 发表于 2026-2-28 15:17

梦江南发表于 2026-2-28 12:16
序号框里的八属性有点知道。

马黑黑 · 发表于 2026-2-28 15:19

彩云归发表于 2026-2-28 12:36
top、right、bottom说明好像有误？

top有误（已改，谢谢提醒），其余没有。所有的参照都基于左上角坐标，所以，元素底部、右部分别以应视口顶端、视口左端为参照。

霜染枫丹 · 发表于 2026-2-28 16:03

马老师几下午好！有了您的解析，我更清楚了，，谢谢您！

也曾年轻 · 发表于 2026-2-28 16:21

与之对照 top、width、height 似乎有所出入。

马黑黑 · 发表于 2026-2-28 20:10

也曾年轻发表于 2026-2-28 16:21
与之对照 top、width、height 似乎有所出入。

以 bottom 属性值为例，我的表述是这样：

bottom 元素底部边界相对于视口顶部的距离

底部边界到顶端的距离，恰好等于 top 属性值 + height 属性值

马黑黑 · 发表于 2026-2-28 20:11

霜染枫丹发表于 2026-2-28 16:03
马老师几下午好！有了您的解析，我更清楚了，，谢谢您！

这个是JS的东东，如果没有JS操纵能力，略微了解就可以了

也曾年轻 · 发表于 2026-2-28 20:34

马黑黑发表于 2026-2-28 20:10
以 bottom 属性值为例，我的表述是这样：

bottom 元素底部边界相对于视口顶部的距离

bottom 没问题，是 top width height

无标题.jpg

霜染枫丹 · 发表于 2026-2-28 20:38

马黑黑发表于 2026-2-28 20:11
这个是JS的东东，如果没有JS操纵能力，略微了解就可以了

我能记住它们的样子，说的是什么，就像看PS的工具，字母我就当作象形图片来认，读不出来，按字母顺序也背不下来。您的帖子给解析了出来，就更清晰了。学您的代码时我就关注有数字的项，把您的代码中的数字改动一下，看画面是哪里在变化，然后就知道了数字前面的代码的作用，多看几遍记住样子。虽然笨了点，我也没更好的办法，对我却是很实用，不管所以然，只管效果。