Element.getBoundingClientRect()

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

语法

rectObject = object.getBoundingClientRect();

返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。

DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

getBoundingClientRect示例图

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

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

为了跨浏览器兼容,请使用 window.pageXOffsetwindow.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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
getBoundingClientRectChrome Full support YesEdge Full support 12Firefox Full support 3IE Full support 4Opera Full support YesSafari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari 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 Yes
heightChrome Full support YesEdge Full support YesFirefox 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 ?
widthChrome Full support YesEdge Full support YesFirefox 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 ?
xChrome Full support YesEdge 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.
Firefox 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 No support NoWebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android ?
yChrome Full support YesEdge 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.
Firefox 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 No support NoWebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android ?

Legend

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

参考资料