getBoundingClientRect方法的使用

getBoundingClientRect方法的使用

getBoundingClientRect()是一个原生js方法，用于获取某个元素相对于 浏览器视窗（可见区域） 的位置信息；

浏览器中的坐标系是以可见区域的左上角为坐标原点，向右向下分别为x轴、y轴的正方向，getBoundingClientRect()所表示元素的位置信息就是基于上述坐标系下的；可以通过一个简单的demo来了解getBoundingClientRect()方法，如下所示：

点击查看demo

从上面的demo中可知getBoundingClientRect()共有8个值，它们所表示的含义如下：

• width：元素的宽度，包括：contentWidth、左右padding、左右border、左右margin；

• height：元素的高度，包括：contentHeight、上下padding、上下border、上下margin；

• top：元素上边框距离浏览器可视窗口顶部的距离；

• bottom：元素下边框距离浏览器可视窗口顶部的距离；

• left：元素左边框距离浏览器可视窗口左侧的距离；

• right：元素右边框距离浏览器可视窗口左侧的距离；

• x：元素左上角顶点在浏览器可视窗口坐标系下的横坐标；

• y：元素左上角顶点在浏览器可视窗口坐标系下的纵坐标；

将元素的getBoundingClientRect()与滚动条滚动距离相结合可以获取任意元素在页面中的位置，详细使用方法如下：

// 先获取dom元素
let dom = document.querySelector('选择器');

// 再调用dom元素对象的getBoundingClientRect()方法获取元素上边框、左边框距离浏览器顶部、左侧的距离
let top = domObj.getBoundingClientRect().top;
let left = domObj.getBoundingClientRect().left;

// 再获取滚动条的水平滚动距离和垂直滚动距离
let scrollBarTop = document.body.scrollTop || document.documentElement.scrollTop;
let scrollBarLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

// 最后获取dom元素在页面中的位置
let domX = top + scrollBarTop;
let domY = left + scrollBarLeft;

参考文献：

[1] getBoundingClientRect的用法
[2] getClientRects 和 getBoundingClientRect 的用法和区别