Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
语法
rectObject = object.getBoundingClientRect();
值
返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。
DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
空边框盒（译者注：没有内容的边框）会被忽略。如果所有的元素边框都是空边框，那么这个矩形给该元素返回的 width、height 值为0，left、top值为第一个css盒子（按内容顺序）的top-left值。
当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的值。
为了跨浏览器兼容，请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。不能访问这些属性的脚本可以使用下面的代码：
// For scrollX (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft // For scrollY (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
举例
// rect 是一个具有四个属性left、top、right、bottom的DOMRect对象 //译者注：DOMRect 是 TextRectangle或 ClientRect 的别称，他们是相同的。 var rect = obj.getBoundingClientRect();
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Object Model (CSSOM) View Module Element.getBoundingClientRect() |
Working Draft | Initial definition |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 [1] | (Yes) | 3.0 (1.9) [3] | 4.0 [2] | (Yes) | 4.0 |
| width/height | (Yes) | (Yes) | 3.5 (1.9.1) [3] | 9 | (Yes) | (Yes) |
| x/y | 未实现 | 未实现 [4] | (Yes) | 未实现 [4] | ? | 未实现 |
| Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | 2.0 | 1.0 | (Yes) | 1.0 (1.9) | 6.0 | (Yes) | 4.0 |
[1] CSS spec for 'use' element 规定了用于 <use> 元素的 'symbol' 元素要设置默认的 width 和 height 为 100%。spec for width and height 'svg' attributes 也要求将 100% 作为默认值。Google Chrome 没有遵循这些规定。同时 Chrome 也不会将 stroke-width 加入计算。所以 Chrome 和 Firefox 浏览器的 getBoundingClientRect() 返回的可能是不同的。
[2] 在IE8或者更低浏览器版本中，getBoudingClientRect()方法返回的TextRectangle对象没有height和width属性。同时，额外的属性（包括height和width）也不能添加到TextRectangle对象中去。
[3] Gecko 1.9.1 将 width 和 height 属性加入到 DOMRect 对象中。
从 Gecko 12.0(Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 开始，计算元素的边界矩形会将 CSS transforms 考虑进来。
[4] IE 和 Edge 返回的是一个不包含 x, y 属性的 MSDN: ClientRect 对象