javascript getBoundingClientRect()获取元素…

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

新老客户大回馈,云服务器低至5折

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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:动态加载JS函数

下一篇:JavaScript经典效果之漂亮的仿flash菜单