使用jS在div中使用箭头键移动图像

<div id="imageDiv">
  <img src="image.jpg" alt="Image">
</div>

const imageDiv = document.getElementById("imageDiv");

imageDiv.addEventListener("keydown", function(event) {
  // 处理键盘事件的代码将在这里
});

imageDiv.addEventListener("keydown", function(event) {
  const image = imageDiv.querySelector("img");
  const imageStyle = getComputedStyle(image);
  const imageLeft = parseInt(imageStyle.left);
  const imageTop = parseInt(imageStyle.top);
  
  switch (event.key) {
    case "ArrowUp":
      image.style.top = (imageTop - 10) + "px";
      break;
    case "ArrowDown":
      image.style.top = (imageTop + 10) + "px";
      break;
    case "ArrowLeft":
      image.style.left = (imageLeft - 10) + "px";
      break;
    case "ArrowRight":
      image.style.left = (imageLeft + 10) + "px";
      break;
  }
});

<div id="imageDiv" tabindex="0">
  <img src="image.jpg" alt="Image">
</div>