如何通过键盘箭头上下移动id为cube的div？左右移动已正常

嘿，我帮你找到了两个导致上下箭头移动无效的关键问题，咱们一步步解决：

1. 变量名冲突：top 是浏览器内置全局属性 #

你在全局作用域里声明了 var top=0;，但top是浏览器自带的全局变量（指向当前窗口的顶层窗口），直接用它当变量名会导致赋值失效——你以为在修改自己定义的变量，其实是在操作window.top，而这个属性是只读的，所以上下移动时top值根本没变化。

解决方法：把变量名改成不会冲突的名字，比如yPos或者topOffset：

var output = document.getElementById("output");
var cube = document.getElementById("cube");
var left = 0;
var yPos = 0; // 替换top为yPos，避免全局变量冲突
document.addEventListener("keydown", function(e) {
  output.innerHTML = 'Key code: ' + e.which + '<br />' + 'Key Name: ' + e.key;
  var key = e.which;
  switch (key) {
    case 38: // arrow up
      yPos = yPos - 10;
      cube.style.top = yPos + "px";
      cube.style.background = "green";
      break;
    case 40: // arrow down
      yPos = yPos + 10;
      cube.style.top = yPos + "px";
      cube.style.background = "#14B4AA";
      break;
    case 39: // arrow right
      left = left + 10;
      cube.style.left = left + "px";
      cube.style.background = "blue";
      break;
    case 37: // arrow left
      left = left - 10;
      cube.style.left = left + "px";
      cube.style.background = "brown";
      break;
  }
});

2. 元素定位问题：top 属性需要非静态定位才能生效 #

默认情况下，HTML元素的position属性值是static，这种定位模式下top、left这类偏移属性完全不起作用。如果你的#cube元素没设置定位，就算变量没问题，修改top也不会有视觉变化。

解决方法：给#cube添加CSS定位样式，比如用relative（相对自身原始位置偏移，适合大多数场景）：

#cube {
  position: relative;
  width: 100px; /* 给元素设置宽高才能看到效果 */
  height: 100px;
  background-color: #ccc; /* 默认背景色 */
}

如果你的布局需要，也可以用absolute（相对于最近的定位父元素偏移）或者fixed（相对于浏览器视口偏移），根据你的需求选择即可。

把这两个问题都修复后，上下箭头应该就能正常移动cube了！

内容的提问来源于stack exchange，提问作者user10904509