HTML DOM getBoundingClientRect()方法
getBoundingClientRect()方法
今天朋友问到了这个方法,为了防止以后使用忘记,先写下来,哦哈哈哈哈~。
官方解释:Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
语法:rectObject = object.getBoundingClientRect();
返回对象:DOMRect 。对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
返回值的类型
rectObject.top:元素上边到视窗上边的距离;
rectObject.right:元素右边到视窗左边的距离;
rectObject.bottom:元素下边到视窗上边的距离;
rectObject.left:元素左边到视窗左边的距离;
兼容性:IE5以上都兼容;IE7以上兼容wid容width和hight。
浏览器兼容
参考文献
1、https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
2、https://www.jianshu.com/p/824eb6f9dda4