HTML DOM getBoundingClientRect()方法

getBoundingClientRect()方法

今天朋友问到了这个方法,为了防止以后使用忘记,先写下来,哦哈哈哈哈~。

官方解释:Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

语法:rectObject = object.getBoundingClientRect();

返回对象:DOMRect 。对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

返回值的类型

rectObject.top:元素上边到视窗上边的距离;

rectObject.right:元素右边到视窗左边的距离;

rectObject.bottom:元素下边到视窗上边的距离;

rectObject.left:元素左边到视窗左边的距离;

HTML DOM getBoundingClientRect()方法

兼容性:IE5以上都兼容;IE7以上兼容wid容width和hight。

浏览器兼容

HTML DOM getBoundingClientRect()方法

参考文献

1、https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

2、https://www.jianshu.com/p/824eb6f9dda4