Element.getBoundingClientRect()

翻译正在进行中。

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

如果是标准盒子模型,元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box,元素的的尺寸等于 width/height

语法

rectObject = object.getBoundingClientRect();

返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合,就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形,并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

DOMRect 示例图空边框盒(译者注:没有内容的边框)会被忽略。如果所有的元素边框都是空边框,那么这个矩形给该元素返回的 widthheight 值为 0,lefttop 值为第一个 CSS 盒子(按内容顺序)的 top-left 值。

当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果你需要获得相对于整个网页左上角定位的属性值,那么只要给top、left属性值加上当前的滚动位置(通过 window.scrollX 和 window.scrollY),这样就可以获取与当前的滚动位置无关的值。

跨浏览器兼容

如果需要更好的跨浏览器兼容性,请使用 window.pageXOffsetwindow.pageYOffset 代替 window.scrollXwindow.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();

规范

规范 状态 备注
CSS Object Model (CSSOM) View Module
Element.getBoundingClientRect()
Working Draft Initial definition

备注

该API返回的 DOMRect 对象在现代浏览器中可以被修改。而对于返回值为 DOMRectReadOnly 的旧版本,返回值并不能被修改。在IE和Edge浏览器中,无法向他们返回的 ClientRect 对象添加缺失的属性,对象可以防止 x 和 y 的回填。

由于兼容性问题(见下文),尽量仅使用 left, top, right, 和 bottom.属性是最安全的。

返回的 DOMRect对象中的属性不是自己的属性。 当使用in 和 for...in 运算符时能成功查找到返回的属性,但使用其他API(例如Object.keys())查找时将失败。 而且,ES2015和更高版本的功能(如Object.assign()和对象rest/spread)将无法复制返回的属性。

rect = elt.getBoundingClientRect()
// The result in emptyObj is {} 
emptyObj = Object.assign({}, rect)
emptyObj = { ...rect }
{width, ...emptyObj} = rect

DOMRect 中的 top, left, rightbottom 属性是使用对象的其他属性的值来计算获得的。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
getBoundingClientRectChrome Full support 2Edge Full support 12Firefox Full support 3IE Full support 4Opera Full support 9.5Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 4
Notes
Full support 4
Notes
Notes Safari for iOS will modify the effective viewport based on the user zoom. This results in incorrect values whenever the user has zoomed.
Samsung Internet Android Full support 1.0
heightChrome Full support YesEdge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
widthChrome Full support YesEdge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
xChrome Full support YesEdge Full support 79Firefox Full support YesIE No support No
Notes
No support No
Notes
Notes Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Opera Full support YesSafari Full support 11WebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android Full support YesSafari iOS Full support 11Samsung Internet Android Full support Yes
yChrome Full support YesEdge Full support 79Firefox Full support YesIE No support No
Notes
No support No
Notes
Notes Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Opera Full support YesSafari Full support 11WebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android Full support YesSafari iOS Full support 11Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

参考资料