本文详解 JavaScript 中 getBoundingClientRect 方法的使用。该 API 返回元素相对于视口的大小和位置，返回值为 DOMRect 对象。文章介绍了 top、left、width 等关键属性，对比了传统 offsetParent 递归定位与现代 API 的差异，并演示了如何计算元素相对于网页左上角的绝对距离及判断元素是否在可视区域内。同时指出频繁调用可能引发重绘，需注意性能影响。
getBoundingClientRect 方法概述
本文主要解析 getBoundingClientRect 方法的核心属性、典型应用场景以及实际开发中需要注意的关键问题。
getBoundingClientRect
核心属性与返回值详解
Element.getBoundingClientRect()定义：
该方法用于获取元素的大小及其相对于当前视口（viewport）的位置信息。
返回值：
返回一个 DOMRect 对象，该对象由 getClientRects() 方法生成的一组矩形集合，实质上代表了与元素相关的 CSS 边框集合。
属性说明：
- top：元素上边框距离页面顶部的距离。
- left：元素左边框距离页面左侧的距离。
- right：元素右边框距离页面左侧的距离。
- bottom：元素下边框距离页面顶部的距离。
- width：元素的宽度。
- height：元素的高度。
关键注意事项与坐标计算
注意事项：
若元素的边框为空，该矩形返回的 width 和 height 值为 0，而 left 和 top 值则对应第一个 CSS 盒子（按内容顺序）的左上角坐标。
在计算边界矩形时，会考虑视口内（或可滚动元素内）的滚动操作。因此，当滚动位置改变时，top 和 left 属性值会立即更新，这意味着它们的值是相对于视口的，而非绝对坐标。
若需获取元素相对于整个网页左上角的定位值，只需将 top 和 left 属性值分别加上当前的滚动偏移量（通过 window.scrollX 和 window.scrollY 获取），即可得到与滚动位置无关的绝对坐标。
如图所示：
当页面元素位于浏览器视口左上角时，top 和 left 值为负数，而 right 和 bottom 值为正数。
获取元素绝对定位距离
应用场景一
1、获取 DOM 元素相对于网页左上角的绝对定位距离
传统做法是通过 offsetParent 逐级查找元素到定位父级元素，直至递归至顶层的 body 或 html 元素。
// 获取dom元素相对于网页左上角定位的距离
function offset(el) {
var top = 0;
var left = 0;
// 获取元素的位置还有getBoundingClientRect的方法
// 从网上得知offset的兼容较差而且设置translate3D的y轴值给元素定位了y轴的距离后
//会出现offsetTop为0
do {
top += el.offsetTop;
left += el.offsetLeft;
}
while(el = el.offsetParent);// 存在兼容性问题，需要兼容
return {
top: top,
left: left
}
}测试代码如下：
var odiv = document.getElementsByClassName('markdown-body');
offset(a[0]); // {top: 271, left: 136}现在利用 getBoundingClientRect 这个 API，可以简化为以下写法：
var positionX = this.getBoundingClientRect().left + document.documentElement.scrollLeft;
var positionY = this.getBoundingClientRect().top + document.documentElement.scrollLeft;判断元素可视区域与性能考量
应用场景二
2、判断元素是否处于可视区域内
function isElView(el) {
var top = el.getBoundingClientRect().top; // 元素顶端到可见区域顶端的距离
var bottom = el.getBoundingClientRect().bottom; // 元素底部端到可见区域顶端的距离
var se = document.documentElement.clientHeight; // 浏览器可见区域高度。
if (top < se && bottom > 0) {
return true;
}
else if (top >= se || bottom <= 0) {
// 不可见
}
return false;
}潜在缺点
频繁计算该属性会触发页面的重绘（reflow），可能对页面性能造成负面影响。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。