介绍
在前端开发中，经常需要计算一个 DOM 元素相对于另一个 DOM 元素的位置以及它们之间的位置关系。这时，我们通常会使用一些 DOM 操作方法来获取相应的信息，比如元素的位置坐标、宽度和高度等。
然而，在某些情况下，简单的 DOM 操作并不能满足我们的需求，可能会遇到一些比较复杂的计算场景，这时我们需要借助一些专门针对这类问题开发的 npm 包来帮助我们解决问题。其中一个非常实用的 npm 包就是 bounding。
bounding 是一个用来计算 DOM 元素边框位置的库。它提供了一系列函数，可以非常方便地计算元素之间的位置关系。本文将详细介绍 bounding 的使用和如何在项目中应用它。
安装
使用 npm 安装 bounding 包：
npm install --save bounding
使用
bbox
bbox 函数用来获取一个 DOM 元素的边框位置。边框位置指的是元素相对于视口的位置，其中包括了元素的左上角、右下角等信息。它返回一个对象，其中包含以下属性：
top: 元素离视口顶部的距离。left: 元素离视口左侧的距离。width: 元素的宽度。height: 元素的高度。bottom: 元素离视口底部的距离，等于top + height。right: 元素离视口右侧的距离，等于left + width。
-- -------------------- ---- ------- ------ ------ ---- ---------- ----- -- - ------------------------------------- ----- --- - -------- -------------------- -- -- --------------------- -- -- ---------------------- -- --- ----------------------- -- -- ----------------------- -- -- ---------------------- -- ---
intersect
intersect 函数用来检查两个 DOM 元素是否相交。它接受两个参数，分别是要比较的两个 DOM 元素。如果两个元素相交，则返回 true，否则返回 false。
import {intersect} from 'bounding'
const el1 = document.getElementById('my-element1')
const el2 = document.getElementById('my-element2')
const isIntersect = intersect(el1, el2)
console.log(isIntersect) // true 或 falseoffsetParent
offsetParent 函数用来获取一个元素相对于其定位父元素的偏移量。如果元素没有定位父元素，则返回 null。
import {offsetParent} from 'bounding'
const el = document.getElementById('my-element')
const parentEl = offsetParent(el)
console.log(parentEl) // null 或者某个 DOM 元素overlap
overlap 函数用来计算两个元素之间的重叠部分。如果两个元素不重叠，则返回 null。
import {overlap} from 'bounding'
const el1 = document.getElementById('my-element1')
const el2 = document.getElementById('my-element2')
const overlappingBox = overlap(el1, el2)
console.log(overlappingBox) // null 或者一个包含重叠部分的 bbox 对象示例
为了更好地理解 bounding 的使用，下面我们来看一个具体的示例。在这个示例中，我们需要检测一个弹出框是否跟随按钮位置变化而实时更新。
首先，我们先创建一个按钮和一个弹出框：
<button id="my-button">点击我弹出框</button> <div id="my-popup">这是一段弹出框内容</div>
然后，在脚本中我们可以使用 bbox 函数来获取元素边框位置，和 getComputedStyle 函数获取元素的样式信息：
const button = document.getElementById('my-button')
const popup = document.getElementById('my-popup')
let buttonBox = bbox(button)
let popupBox = bbox(popup)
let popupStyle = getComputedStyle(popup)接着，我们可以监听浏览器窗口大小变化事件，并在弹出框内部对齐按钮：
-- -------------------- ---- ------- --------------------------------- -- -- - --------- - ------------ -------- - ----------- ----- --- - ---------------- ----- ---- - -------------- ----- ----- - --------------- --------------- - ---------- ---------------- - ----------- ----------------- - -------- - -------- ------------------- - ------------------ ------------------ - ----------------- --
通过计算按钮的底部坐标和左侧坐标以及右侧坐标，即可得到弹出框的位置和大小。这样，弹出框就会随着按钮位置变化而实时更新了。
总结
bounding 是一个非常实用的 npm 包，它提供了一些方便的函数来帮助我们计算 DOM 元素之间的位置关系。在实际项目中，我们可以借助它来解决一些比较复杂的计算问题，比如弹出框在页面中的定位等。希望本文对大家了解 bounding 的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c84ccdc64669dde4e53