JavaScript getBoundingClientRect() 方法详解与跨浏览器兼容方案

一、getBoundingClientRect() 解析

该方法用于获取元素的大小及其相对于浏览器视口（viewport）的位置信息。

语法

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();

本文关于 js 中 getBoundingClientRect() 方法的案例详解到此结束，更多相关 js 中 getBoundingClientRect() 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！