js getBoundingClientRect()获取元素四个角相对于窗口或文档的位置

时间:2018-08-21
本文章向大家介绍,需要的朋友可以参考一下

Element.getBoundingClientRect()返回元素的大小及相对于窗口的位置

语法:

rectObject=object.getBoundingClientRect();

返回值是一个DOMRect对象,即DOMRect={x:scrollLeft,y:scrollY,width:val1,height:val2,top:topPosition,left:leftPosition,bottom:bottomPosition,right:rightPosition}共8个属性。

兼容性:

[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 对象

在计算边界矩形,会考虑视口区域(或其他滚动操作)内的滚动操作,当滚动位置发生改变时,四个角的属性值也会发生改变,因此他们的值是相对于视口的不是绝对的,如果你需要相对于整个网页左上角定位的属性值,只需要给四个角的属性值加上当前的滚动位置,在支持返回支持x,y属性的浏览器中,只需要用四个角的属性值减去x,y的属性值,即可获得与当前滚动位置无关的值。或者通过window.scrollX 和window.scrrollY来获取当前滚动位置。