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();
栏 目：JavaScript代码
下一篇：javascript将扁平的数据转为树形结构的高效率算法
本文标题：js中getBoundingClientRect( )方法案例详解
本文地址：http://www.codeinn.net/misctech/185942.html
