您是否需要获取 DOM 元素在页面上的位置或大小？或者需要计算元素相对于其父元素的位置？如果是这样，那么你可能需要 npm 包 dom-offset。
dom-offset 提供了一个简单的 API，可以获取元素的位置和大小，并支持跨浏览器计算元素相对于其父元素的位置。
安装
你可以通过以下命令来安装 dom-offset：
npm install dom-offset
使用
offset
offset 方法用于获取元素的位置和大小：
const offset = require('dom-offset');
const el = document.getElementById('my-element');
const result = offset(el);
console.log(result); // { top: 10, left: 20, width: 100, height: 50 }offset 方法返回一个对象，包含元素的 top，left，width 和 height 属性。这些属性都是元素相对于文档的坐标和大小。
position
position 方法用于获取元素相对于其父元素的位置：
const position = require('dom-offset/position');
const el = document.getElementById('my-element');
const result = position(el);
console.log(result); // { top: 10, left: 20 }position 方法返回一个对象，包含元素的 top 和 left 属性。这些属性表示元素相对于其父元素的坐标。
示例
以下是一个示例代码，演示如何使用 dom-offset 获取元素的位置和相对于其父元素的位置：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ----------
-------
------
---- ---------- ---------------- --------- ------ ------ ------- --------
---- ---------- ---------------- --------- ----- ----- ---- ----- ------ ------ ------- -------------
------
------- ------------------------------------------------
--------
----- -- - ---------------------------------
----- ------ - ----------------------
----- -------- - -------------------------------
------------------------ -- - ---- --- ----- --- ------ ---- ------- -- -
-------------------------- -- - ---- --- ----- -- -
---------
-------
-------总结
在前端开发中，获取元素的位置和大小是一个很常见的需求。dom-offset 提供了一个方便的 API 来获取元素的位置和相对于其父元素的位置，并支持跨浏览器的计算。希望本教程能帮助你更好地理解和使用 dom-offset。
学习 dom-offset，能够帮助您更好地开发页面，并让您更加专业，快速地解决页面布局问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559cb81e8991b448d750e