时间戳

首页 > 解决方案 > 窗口中的给定位置是空白或元素存在

javascript - 窗口中的给定位置是空白或元素存在

问题描述

我需要查找窗口中的特定坐标是空的还是被任何 DOM 元素占用，如果它是空的，我需要动态添加 dom 元素。

for(var i=0;i<100;i++)
  {
    for(var j=0;j<100;j=j+10)
      {
        var  elem = document.elementFromPoint(i, j);
        console.log(elem.id);
      }
  }
<div id="navenn" style="height:100px;background-color:red">

上面的代码将遍历窗口的坐标，如果一个位置被任何元素占据 elem.id 不应该为空，但在我的情况下它总是空的

elementFromPoint中的x和y参数是什么，代表像素吗？

标签： javascriptjquerycss

解决方案

只要您在窗口内搜索坐标，elementFromPoint()就会返回一个元素。您应该检查它是您插入的元素还是只是文档<html>元素。

以下是检查特定类的示例：

for (var x = 0; x < 100; x++) {
  for (var y = 0; y < 100; y = y + 10) {
    var elem = document.elementFromPoint(x, y);
    var isItem = elem.classList.contains('item');

    console.log(`x: ${x}, y: ${y} -  ${isItem ? 'found ' : 'NOT found'}`);
  }
}
<div id="navenn" class="item" style="height:100px;background-color:red">

这是一个坐标超过 100 的示例y（您的 red 的高度<div>）：

for (var x = 0; x < 100; x++) {
  for (var y = 0; y < 200; y = y + 10) {
    var elem = document.elementFromPoint(x, y);
    var isItem = elem.classList.contains('item');

    console.log(`x: ${x}, y: ${y} -  ${isItem ? 'found ' : 'NOT found'}`);
  }
}
<div id="navenn" class="item" style="height:100px;background-color:red">

推荐阅读