javascript 可以判断元素是否在其他元素之上吗？
考虑这个标记：
<!doctype html>
<html>
<style>
section div {width: 100px; position: absolute; border: 1px solid black; }
</style>
<body>
<section>
<div id="div1" style="height: 400px; background: blue;"></div>
<div id="div2" style="height: 300px; background: red;"></div>
<div id="div3" style="height: 200px; background: yellow;"></div>
<div id="div4" style="height: 100px; background: green;"></div>
</section>
</body>
</html>
我如何知道（例如）div3 下是否有内容？
如果 .a 下面有东西，下面的代码将返回 true div。在您的示例中，它对除 之外的所有divs返回 true ，因为它的高度比其他的大。 div1
const isOnTop = (id) => {
let element = document.querySelector(id),
divs = document.querySelectorAll('section div');
return [...divs].some(div =>
div.getBoundingClientRect().bottom > element.getBoundingClientRect().bottom
);
}
const isOnTop = (id) => {
let element = document.querySelector(id),
divs = document.querySelectorAll('section div');
return [...divs].some(div =>
div.getBoundingClientRect().bottom > element.getBoundingClientRect().bottom
);
}
const isOnTop = (id) => {
let element = document.querySelector(id),
divs = document.querySelectorAll('section div');
return [...divs].some(div =>
div.getBoundingClientRect().bottom > element.getBoundingClientRect().bottom
);
}
console.log(isOnTop('#div1')); // false
console.log(isOnTop('#div2')); // true
console.log(isOnTop('#div3')); // true
console.log(isOnTop('#div4')); // truesection div {
width: 100px;
position: absolute;
border: 1px solid black;
}