使用 JavaScript 检查两个元素是否重叠
要检查两个元素是否重叠，请使用 getBoundingClientRect() 方法获取一个对象，该对象包含有关元素与视口的相对位置的信息。 然后，比较两个矩形的边界边缘（上、右、下、左）。
以下是本文示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="box1" style="width: 100px; height: 100px; background-color: salmon; position:absolute;">
Box 1
</span>
<div id="box2" style="width: 100px; height: 100px; background-color: lime">
Box 2
</span>
<div id="box3" style="width: 100px; height:100px; background-color: plum; margin-top: 150px;">
Box 3
</div>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
function elementsOverlap(el1, el2) {
const domRect1 = el1.getBoundingClientRect();
const domRect2 = el2.getBoundingClientRect();
return !(
domRect1.top > domRect2.bottom ||
domRect1.right < domRect2.left ||
domRect1.bottom < domRect2.top ||
domRect1.left > domRect2.right
);
}
const el1 = document.getElementById('box1');
const el2 = document.getElementById('box2');
const el3 = document.getElementById('box3');
console.log(elementsOverlap(el1, el2)); // 👉️ true
console.log(elementsOverlap(el1, el3)); // 👉️ false
我们创建了一个可重用的函数来检查两个元素是否重叠并返回一个布尔结果：
- 如果元素重叠，则为 true。
- 如果他们不这样做，则为假。
我们使用 getBoundingClientRect() 方法来获取一个对象，该对象包含有关元素与视口的相对位置的信息。
top、right、bottom和left属性描述了元素相对于视口左上角的位置。
请注意，当滚动位置发生变化时，矩形的边界边缘（顶部、右侧、底部和左侧）会更改它们的值，因为它们的值是相对于视口的。
如果括号中的所有条件都满足，则元素不重叠并且函数返回 false。
另一方面，如果所有条件都返回 false，则元素重叠。
当我们使用 id 为 box1 和 box2 的元素调用 elementsOverlap 函数时，该函数返回 true，因为第一个元素的位置设置为绝对位置并与第二个元素重叠。
当我们使用第一个和第三个元素调用该函数时，它返回 false，因为第三个元素的 margin-top 为 150px 并且不与第一个重叠。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间：2023/03/24 浏览次数：141 分类：JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
