前言
在开发前端网页时，我们经常需要获取元素的位置信息来实现各种效果。而在获取位置信息时，经常需要获取元素的四个角点的坐标。使用 js 手动计算四个角点的坐标是一项繁琐工作，所以有许多 npm 包提供了方便的 DOM 元素位置获取功能。本文介绍一款名为 dom-get-corner 的 npm 包，即一个轻量级的库，可以轻松获取元素的四个角点的坐标，使用简单方便。
安装
在使用 dom-get-corner 前，需要先安装它。在项目根目录下，运行下面的 npm 命令进行安装：
npm install dom-get-corner
使用方法
获取角点
使用 dom-get-corner 非常简单，只需要引入包并调用相应的函数即可。下面是获取一个 DOM 元素四个角点的示例代码:
<div id="myDiv" style="position: absolute; left: 100px; top: 100px; width: 200px; height: 200px; background-color: red;"></div>
import { getCorner } from 'dom-get-corner';
const myDiv = document.getElementById('myDiv');
const corners = getCorner(myDiv);
console.log(corners); // [{ x: 100, y: 100 }, { x: 300, y: 100 }, { x: 300, y: 300 }, { x: 100, y: 300 }]上面代码中，我们首先通过 getElementById 方法获取了 id 为 myDiv 的元素。然后，我们调用了 getCorner 函数来获取该元素的四个角点的坐标，并将结果输出到控制台。
获取特定角点
如果只需要获取某一个角点的坐标，而不是全部四个角点的坐标，可以使用以下几种函数：
getTopLeftCorner：获取左上角的坐标getTopRightCorner：获取右上角的坐标getBottomRightCorner：获取右下角的坐标getBottomLeftCorner：获取左下角的坐标
下面是获取 myDiv 元素的左上角坐标的示例代码：
import { getTopLeftCorner } from 'dom-get-corner';
const myDiv = document.getElementById('myDiv');
const topLeftCorner = getTopLeftCorner(myDiv);
console.log(topLeftCorner); // { x: 100, y: 100 }最佳实践
使用 dom-get-corner 即可方便快捷地获取 DOM 元素的坐标，是前端开发中的一个优秀工具。下面是一些在实际开发中的最佳实践：
在绝对定位元素中获取角点
通常情况下，我们在绝对定位的元素中获取角点信息（因为相对定位的元素无法确定其位置信息）。下面是一个符合标准的绝对定位方案：
<div id="myDiv" style="position: absolute; left: 100px; top: 100px; width: 200px; height: 200px; background-color: red;">
<div style="position: relative">
<span style="position: absolute; left: 20px; top: 20px;">Hello World</span>
</div>
</div>获取隐藏元素的角点
如果 DOM 元素被隐藏了，那么使用 dom-get-corner 是无法获取到该元素的角点的。但是，我们可以设置该元素的 visibility 属性为 hidden，而非 display 属性为 none。其原因是，当元素的 display 属性为 none 时，该元素在渲染时是不被渲染的，从而无法获取到该元素的位置信息。而 visibility 属性为 hidden 时，该元素会占据空间，但是不会被渲染，所以依然可以获取到该元素的位置信息。
总结
dom-get-corner 是一个在前端工程中方便获取角点坐标的 npm 包，使用简单易懂。在使用时，我们需要注意在绝对定位元素中获取角点信息，以及注意元素的隐藏状态。使用 dom-get-corner 可以帮助我们更加方便快捷地进行前端开发，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563b781e8991b448e11f4