JS: getBoundingClientRect()方法简介

马黑黑

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
看得懂不？

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

彩云归

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

马黑黑

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

马黑黑

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

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

霜染枫丹

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

也曾年轻

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