js中getBoundingClientRect( )方法案例详解
时间：2021-12-06 09:46:54 | 栏目：JavaScript代码 | 点击：次
一.getBoundingClientRect() 解析
getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
语法
rectObject = object.getBoundingClientRect();
值
rectObject.top：元素上边到视窗上边的距离; rectObject.right：元素右边到视窗左边的距离; rectObject.bottom：元素下边到视窗上边的距离; rectObject.left：元素左边到视窗左边的距离; rectObject.width：是元素自身的宽度 rectObject.height是元素自身的高度
跨浏览器兼容
如果需要更好的跨浏览器兼容性，请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。不能访问这些属性的脚本可以使用下面的代码：
// For scrollX (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft // For scrollY (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
示例
// rect 是一个具有四个属性 left、top、right、bottom 的 DOMRect 对象
注：DOMRect 是 TextRectangle 或 ClientRect 的标准名称，他们是相同的。
var rect = obj.getBoundingClientRect();