Question

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下是否有东西？

Answer 1

好吧，如果有人想知道两个元素是否重叠...我不理解行为...超出了正确答案

contentFiles

原始答案：

您需要检查父级/树中的元素的zIndex，偏移位置和顺序。这将需要一些递归，并且取决于深度，可能会有些麻烦。如果您要控制渲染/调整，则使用数据模型/控制器进行碰撞检测可能会更容易。

Answer 2

这是我认为应该起作用的代码（它是伪代码）

var div3_position = document.getElementById('div3').getBoundingClientRect();
var divs = document.getElementsByTagName("div");
var inner_div_pos = null;
var div3_zindex = getStyle('div3', "zIndex");
var zInd = null;
for (var i = 0; i < divs.length; i++) {
    if (divs[i].id !== 'div3') {
        inner_div_pos = divs[i].getBoundingClientRect();
        zInd = getStyle(divs[i].id, "zIndex");
        if (!doesPointCollide(inner_div_pos) && zInd < div3_zindex) {
            console.log('element is under');
        }
    }
}

function doesPointCollide(p) {
    return !(p.x < div3_position.left || p.x > div3_position.right || p.y >
        div3_position.bottom || p.y < div3_position.top)
}

function getStyle(el, styleProp) {
    var x = document.getElementById(el);

    if (window.getComputedStyle) {
        var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
    } else if (x.currentStyle) {
        var y = x.currentStyle[styleProp];
    }

    return y;
}

Answer 3

如果div下有内容，则下面的代码将返回true。在您的示例中，对于所有div除 div1以外的所有元素，它均返回true，因为它的高度大于其他高度。

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'));  // true

section div {
  width: 100px;
  position: absolute;
  border: 1px solid black;
}

<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>

javascript可以判断元素是否在其他元素之上吗？

3 个答案: