如何通过JavaScript和HTML中的坐标搜索元素内部

Question

可以说我有一个div元素。 它是500x500像素。 它的内部有许多盒子，它们对较大的div具有绝对的定位。 如果我想使用document.elementFromPoint（），我应该获取主div的偏移量，然后在框内添加px值进行搜索。 还是我应该像mainDiv.elementFromPoint（）这样做。

主div具有相对定位，其他div具有绝对定位。

我无法使用elementFromPoint在框中查找元素，关于定位的工作方式我是否不了解？

Answer 1

访问并测试这支笔

这将使您了解document.elementFromPoint（）;的含义。 仅适用于文档。

JS

function changeColor(newColor) {
  elem = document.elementFromPoint(250, 150);
  elem.style.backgroundColor = newColor;
}

changeColor('#dd4d39');

HTML

<div class="main">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.main {
  width: 500px;
  height: 500px;
  margin: 50px;
  background: #eee;
  display: inline-block;
  position: relative
}

.main div {
  width: 98px;
  height: 98px;
  margin: 1px;
  background: #ddd;
  display: inline-block;
  position: absolute
}

.main div:nth-child(2) {
  top: 0;
  left: 100px;
}

.main div:nth-child(3) {
  top: 100px;
  left: 0;
}

.main div:nth-child(4) {
  top: 0;
  left: 200px;
}

.main div:nth-child(5) {
  top: 200px;
  left: 0;
}

.main div:nth-child(6) {
  top: 0;
  left: 300px;
}

.main div:nth-child(7) {
  top: 300px;
  left: 0;
}

参考document.elementFromPoint（）;