javascript getBoundingClientRect()获取元素…

2018-08-21 05:30:20来源：博客园阅读 ()

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有