JS | 元素视图方法之getBoundingClientRect()方法详解，秒懂！

目录

一、getBoundingClientRect()简介

二、getBoundingClientRect()的兼容性

三、getBoundingClientRect()的示例及分析

四、getBoundingClientRect()的应用场景

---

在前端开发过程中，我们经常需要获取 HTML 元素的尺寸和位置信息。getBoundingClientRect()方法就是一个非常重要的工具，它可以帮助我们获取元素的大小及其相对于视口的位置。

一、getBoundingClientRect()简介

1、getBoundingClientRect()方法的含义

getBoundingClientRect()是一个原生的 DOM 元素的方法，该方法返回一个 Object 对象，包含元素的大小及其相对于视口的位置。

注意：getBoundingClientRect()，这个方法没有参数的

getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。也就是说，该方法用于获取 DOM 元素到浏览器可视范围的距离（不包含文档卷起的部分）。

2、getBoundingClientRect()方法的语法

Element.getBoundingClientRect();

3、getBoundingClientRect()方法的返回值

该函数返回的 DOMRect 对象，包含 6 个属性：top，bottom，left，right，width，height。

二、getBoundingClientRect()的兼容性

​getBoundingClientRect() ​方法在大多数现代浏览器中都得到了支持，包括 IE5 以上的版本。‌ 这个方法最初是由 IE 引入的，后来被 W3C 接纳为标准，因此在现代浏览器中的兼容性几乎完美‌。

尽管大多数浏览器都支持 getBoundingClientRect 方法，但在一些老版本浏览器中仍然存在兼容性问题。例如，IE6 和 IE7 的 left 和 top 值会少 2px，这是因为 HTMl 文档根元素默认有 2px 的边框。此外，Firefox 6 以前的版本无法获取 top 和 bottom 属性值‌。

为了解决这些兼容性问题，可以通过一些技巧来统一处理。例如，在测试 getBoundingClientRect 方法时，可以创建一个临时元素来获取其 getBoundingClientRect 值，然后用这个值来调整原始元素的坐标。这种方法可以确保在不同浏览器中获取到的位置数据一致‌。

1、width 和 height：ie9 及以上支持 width / height 属性。

ie9 以下浏览器只支持 getBoundingClientRect 方法的 4 个属性：top、bottom、right、left 属性；

ie9 和其它浏览器支持 getBoundingClientRect 方法的 6 个属性：top、bottom、right、left、width 和 height

兼容 ie6~ie8 的 width / height 的写法：

var rectWidth = rect.right - rect.left;

var rectHeight = rect.bottom - rect.top;

2、在 ie7 及 ie7 以下 document.documentElement 即 html 标签的 left 和top会多出两个像素。

在 ie7 及 ie7 以下的 html 元素坐标会从 (2, 2) 开始算起，在 ie8 已经修复了这个 bug。这就是多出两个像素的原因。下面我们做下兼容：

var rectLeft = rect.left - document.documentElement.clientLeft || 2;
var rectRight = rect.right - document.documentElement.clientLeft || 2;
var rectBottom = rect.bottom - document.documentElement.clientTop || 2;
var rectTop = rect.top - document.documentElement.clientTop || 2;

小结：getBoundingClientRect()方法最初是在 IE5 中引入的，并且现在已经成为 W3C 标准的一部分，因此在大多数现代浏览器中都得到了良好的支持。‌ 然而，在不同的浏览器和版本中，仍然存在一些兼容性问题需要注意。

在 IE 浏览器中，尤其是 IE6 和 IE7，getBoundingClientRect()方法返回的 left 和top值会比实际位置少 2 像素，这是因为 HTML 文档根元素默认有 2 像素的边框。为了解决这个问题，可以在获取边界之前，创建一个临时元素并设置其样式，然后获取该元素的 getBoundingClientRect() 值，用这个值来校正原始元素的 left 和top值‌。

在 FireFox 浏览器中，Firefox 6 及以前的版本使用 getBoundingClientRect() 时不能获取到 top 和bottom这两个属性值。从 Firefox 6 及以后的版本开始，所有四个属性值都能正确获取‌。

对 Chrome、Safari 等现代浏览器，getBoundingClientRect()方法已经非常成熟，能够正确返回元素的 left、top、right、bottom、width 和height属性值‌。

为了确保跨浏览器的兼容性，可以通过以下代码进行兼容处理：

function getElementPosition(element) {var rect = element.getBoundingClientRect();
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    var offset = 2; // 根据需要调整，例如 IE6 和 IE7 需要减去 2 像素
    return {
        left: rect.left + scrollLeft - offset,
        top: rect.top + scrollTop - offset,
        right: rect.right + scrollLeft - offset,
        bottom: rect.bottom + scrollTop - offset,
        width: rect.right - rect.left,
        height: rect.bottom - rect.top
    };
}

三、getBoundingClientRect()的示例及分析

下面是一个小案例，由下图可知当前元素为 #box，及 box 的相关样式(图中红色框），针对返回值进行详细分析与计算。

---

width / height：width 和 height 属性包含了 padding 和 border，而不仅仅是内容部分的宽度和高度。

● box-sizing:  content-box  ——Standards 模式 | 标准模式 

在标准盒子模型（默认模型）中，这两个属性值分别与元素的 内容区域的宽高 width/height + padding + border-width 相等。

● box-sizing:  border-box ——Quirks模式 | 怪异模式

如果是 box-sizing:border-box，两个属性则直接与元素的 width 或 height 相等。

---

top：图中 红色线 表示 top 的取值区域，最外层边框即上边框到窗口顶部的距离。

● 计算：当前元素的 margin-top 为 90，说明元素 上边框 距离窗口顶部为 90px，所以 top=90

---

left：图中 蓝色线 表示 left 的取值范围，可知是由最左侧边框及左边框到窗口左侧的距离。

计算：当前元素的 margin-left 为 120，说明元素 左边框 距离窗口左侧为 120px，所 left=120

---

bottom：图中 紫色线 表示 bottom 的取值范围，可知是元素的 下边框 到窗口顶部的距离。

包含元素的元素总高度(border + padding + 元素内容区域的高度 content height) + margin。

计算：此时的 bottom = border + padding + 元素内容区域的高度 + margin-top，所 bottom = (16*2) + (10*2) + 300] + 90 = 442，即等于 y + height

---

right：图中 绿色线 表示 right 的取值范围，可知是元素 右边框 到窗口顶部的距离。

包含元素的元素总宽度(border + padding + 元素内容区域的宽度 content width) + margin。

计算：此时的 right = border + padding + 元素内容区域的宽度 + margin-left，所 right = (16*2) + (10*2) + 300] + 120 = 472，即等于 y + width

---

x：元素左上角相对于视口的横坐标，即与 left 相同，所以 x =120。

y：元素左上角相对于视口的纵坐标，即与 top 相同，所以 y =90。

四、getBoundingClientRect()的应用场景

这个方法通常用于需要获取元素在视口中的位置和尺寸信息的场景，比如实现拖拽、定位或响应式布局等，兼容性很好，一般用滚动事件比较多。

特殊场景会用上，比如你登录了淘宝的网页，当你下拉滑块的时候，下面的图片不会立即加载出来，有一个懒加载的效果。当上面一张图片没在可视区内时，就开始加载下面的图片。

参考：图片懒加载四种实现方案之 getBoundingClientRect()方法 – 烤地瓜 CSDN 博客

参考：JavaScript 中 getBoundingClientRect 的使用方法详解及应用场景 – 脚本之家

下面代码就是判断一个容器是否出现在可视窗口内：

 const box = document.getElementById('box')
 window.onscroll = function () {//window.addEventListener('scroll',()=>{})
  console.log(checkInView(box));
 }

function checkInView(dom) {const { top, left, bottom, right} = dom.getBoundingClientRect();
 return top > 0 &&
        left > 0 &&
        bottom 

getBoundingClientRect()方法的缺点：这个属性频繁计算会引发页面的重绘，可能会对页面的性能造成影响。

---

● 参考资料 ●

深入理解元素视图的 3 个方法之 getBoundingClientRect()方法 – 博客园

深入理解 getBoundingClientRect：前端开发的定位利器 - 百度开发者中心

Js 中的 getBoundingClientRect | 从 getBoundingClientRect()设置边距

js getBoundingClientRect 使用方法详解_javascript 技巧_脚本之家

超详细分析！！！秒懂 getBoundingClientRect()-CSDN 博客

—— 图片懒加载四种实现方案之 getBoundingClientRect()方法 – 烤地瓜 CSDN 博客 ——