Question

有没有一种通用的方法来检查内容是否在另一个元素之上？例如：

在this页中，元素.ads不在.content的顶部，因此这不是问题。但是在this页中，它干扰了读者，因此它似乎不应该出现。

重要的是要注意，我正在寻找一种通用的方法来执行此操作，我不知道主要元素是什么，或者它的大小只有ads元素。

不幸的是，我没有找到任何解决方法，对此也没有任何其他疑问，所以我无法提供我尝试过的内容，因为这似乎是不可能的。

谢谢。

Answer 1

没有提供此功能的DOM方法。您可以编写一个函数来检查两个元素是否重叠。如果它们是，则检查两者的CSS属性以推断一个位于另一个之上。这可以帮助您入门：

function areOverlapping(elem1, elem2) {
  const rect1 = elem1.getBoundingClientRect();
  const rect2 = elem2.getBoundingClientRect();

  return !(rect2.left > rect1.right || 
           rect2.right < rect1.left || 
           rect2.top > rect1.bottom ||
           rect2.bottom < rect1.top);
}

const ads = document.querySelector('.ads');
const content = document.querySelector('.content');

if (areOverlapping(ads, content)) {
  const style1 = window.getComputedStyle(ads);
  const style2 = window.getComputedStyle(content);

  // Here you can check CSS position, z-index, display, etc.
  // to infer that one is on top of the other.
  //
  // e.g. if one is position:fixed and the other is static,
  // you know the fixed is on top of the static due to overlap.
}

如果在主要内容之上，则不显示元素

1 个答案: