如何使用箭头键移动图像并在javascript中获取div后面的ID？

Question

我已经成功使用箭头键移动了图像，但是现在我想在移动的图像后面获取ID。 在这里，我想要图像重叠时的所有div ID。

html

<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<img id="image" src="http://placekitten.com/69/69" style="position:absolute;left:0; top:0; z-index: 1;" height="15" width="15">

的CSS

body{background:yellow;}
#box2, 
#box3, 
#box4, 
#box5 {
  width: 50px;
  height: 50px;
  background: greenyellow;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 2 
}

#box3 {
  top: 150px;
  left: 150px; 
}

#box4 {
  top: 50px;
  left: 250px;
}

请检查演示链接

https://jsfiddle.net/36y0ztn9/1/

Answer 1

要获取ID，您可以在JavaScript文件中使用document.querySelector('#idname) or document.getElementById('idname') 。

Answer 2

遵循我上面的评论，

document.elementFromPoint仅获得最上面的元素-mozilla docs ，这里是图像本身，因此可以使用类似的方法，例如将display:none或pointer-events:none设置为图像，使框成为最上面的elem并获取框ID。 然后重新设置该值。

检查此工作提琴，在此我对您的提琴进行了一些修改： https : //jsfiddle.net/y6xsnc8h/1

还要检查此答案以获取可重用的功能： https : //stackoverflow.com/a/22428553/7314900