HTML DOM getBoundingClientRect() Method

用法

返回一个元素的尺寸和它相对于当前窗口的位置:

var rect = obj.getBoundingClientRect();

测试一下

 

返回值释义如下:

object.getBoundingClientRect().top:元素上边到视窗上边的距离
object.getBoundingClientRect().right:元素右边到视窗左边的距离
object.getBoundingClientRect().bottom:元素下边到视窗上边的距离
object.getBoundingClientRect().left:元素左边到视窗左边的距离
object.getBoundingClientRect().width:元素宽度
object.getBoundingClientRect().height:元素高度
object.getBoundingClientRect().x:用于left
object.getBoundingClientRect().y:用于top

注意:right和bottom的定义和css绝以定位是不同的。right是元素最右侧距离窗口左边框的距离,bottom是指元素底部跑窗口上边框的距离。也就是说,right和bottom是包含了border的数值。

 

浏览器兼容性

来源:https://www.jianshu.com/p/2907180ca01e

①ie5以上都能支持,ie9以上支持width/height属性

②但是IE6,7的left、top会少2px,且没有width、height属性。

③width和height:ie9以上支持width/height属性。

兼容ie6~ie8的width/height的写法:

ar objWidth = rectObject.right - rectObject.left,

   objHeight = rectObject.bottom - rectObject.top;

 

兼容性权威查证:https://caniuse.com/#feat=getboundingclientrect

 

兼容IE6-8的写法,https://jsbin.com/xalubocaga/edit?html,js,output

 

扩展阅读:

1、获取DOM元素的位置:https://harttle.land/2018/04/22/get-dom-layout.html