JS中获取 DOM 元素的绝对位置实例详解

获取 DOM 元素的绝对位置是前端开发中常用的操作之一。本文将提供 JS 获取 DOM 元素绝对位置的详细攻略，包括两个实例。

获取 DOM 元素的绝对位置是前端开发中常用的操作之一。本文将提供 JS 获取 DOM 元素绝对位置的详细攻略，包括两个实例。

一、获取 DOM 元素的绝对位置

在JS中，获取DOM元素的绝对位置需要以下步骤：

1. 获取元素相对于视口的位置

使用getBoundingClientRect()方法可以获取元素相对于视口的位置信息，并返回坐标的四个属性值（left、top、right、bottom）。

javascript
const rect = el.getBoundingClientRect();

1. 获取视口的位置

使用document.documentElement或document.body获取视口的位置信息。document.documentElement适用于标准模式的浏览器，document.body适用于怪异模式的浏览器。

javascript
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

1. 计算 DOM 元素的绝对位置

用获取到的元素相对于视口的位置和视口的位置计算元素的绝对位置。

javascript
const absoluteTop = rect.top + scrollTop;
const absoluteLeft = rect.left + scrollLeft;

二、获取 DOM 元素的绝对位置实例

实例一

HTML代码：

<div id="box">这是一个div元素</div>

JS代码：

const box = document.getElementById('box');

const rect = box.getBoundingClientRect();
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
const absoluteTop = rect.top + scrollTop;
const absoluteLeft = rect.left + scrollLeft;

console.log(`元素的绝对位置为：${absoluteLeft}, ${absoluteTop}`);

输出结果：

元素的绝对位置为：0, 0

实例二

HTML代码：

<div id="box" style="position:absolute; left: 100px; top: 100px">这是一个div元素</div>

JS代码：

const box = document.getElementById('box');

const rect = box.getBoundingClientRect();
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
const absoluteTop = rect.top + scrollTop;
const absoluteLeft = rect.left + scrollLeft;

console.log(`元素的绝对位置为：${absoluteLeft}, ${absoluteTop}`);

输出结果：

元素的绝对位置为：100, 100

三、总结

本文介绍了JS获取DOM元素的绝对位置攻略，并给出了两个实例。当我们需要获取DOM元素的绝对位置时，可以使用本文所述方法来实现。