Element.getBoundingClientRect()

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

浏览器兼容性节

Update compatibility data on GitHub

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
getBoundingClientRect	Full supportYes	Full support12	Full support3	Full support4	Full supportYes	Full support6	Full supportYes	Full supportYes	Full supportYes	Full support4	Full supportYes	Full support4 Notes 打开	Full supportYes
width	Full supportYes	Full supportYes	Full support3.5	Full support9	Full supportYes	Full supportYes	Full supportYes	Full supportYes	?	?	Full supportYes	Full supportYes	?
height	Full supportYes	Full supportYes	Full support3.5	Full support9	Full supportYes	Full supportYes	Full supportYes	Full supportYes	?	?	Full supportYes	Full supportYes	?
x	Full supportYes	No supportNo Notes 打开	Full supportYes	No supportNo Notes 打开	Full supportYes	No supportNo	Full supportYes	Full supportYes	?	?	Full supportYes	?	?
y	Full supportYes	No supportNo Notes 打开	Full supportYes	No supportNo Notes 打开	Full supportYes	No supportNo	Full supportYes	Full supportYes	?	?	Full supportYes	?	?

参考资料节

• MSDN: getBoundingClientRect
• getClientRects()

转载于:https://my.oschina.net/jamesview/blog/3075479