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] 规定了用于 <use> 元素的 'symbol' 元素要设置默认的 width 和 height 为 100%。 也要求将 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 属性的 对象
在计算边界矩形，会考虑视口区域（或其他滚动操作）内的滚动操作，当滚动位置发生改变时，四个角的属性值也会发生改变，因此他们的值是相对于视口的不是绝对的，如果你需要相对于整个网页左上角定位的属性值，只需要给四个角的属性值加上当前的滚动位置，在支持返回支持x，y属性的浏览器中，只需要用四个角的属性值减去x，y的属性值，即可获得与当前滚动位置无关的值。或者通过window.scrollx 和window.scrrolly来获取当前滚动位置。
如对本文有疑问， 点击进行留言回复！！
JS 浅拷贝——Shallow copy 在 Canvas 绘图中的应用
我要评论
网友评论