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

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来获取当前滚动位置。