getBoundingClientRect()

最新推荐文章于 2024-08-12 15:18:18 发布

_处女座程序员的日常

最新推荐文章于 2024-08-12 15:18:18 发布

阅读量344

点赞数

分类专栏： vue 前端 js 文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/qq_42931285/article/details/127152862

版权

前端同时被 3 个专栏收录

374 篇文章 13 订阅

订阅专栏

231 篇文章 1 订阅

订阅专栏

vue

210 篇文章 4 订阅

订阅专栏

该Element.getBoundingClientRect()方法返回一个 DOMRect 对象，该对象提供元素大小及其相对于视口的位置信息；

用法如下：

domRect = element.getBoundingClientRect();

返回元素的 left, top, right, bottom, x, y, width, and height 值；

示意图
比如说要获得 DOM 元素相对于网页左上角的定位距离 top 和 left 的值：

const h3 = document.querySelector("h3");
const rect = h3.getBoundingClientRect();
const topElement = document.documentElement;
// 需要加上被卷起的高度
const positionTop = topElement.scrollTop + rect.top;
const positionLeft = topElement.scrollLeft + rect.left;