如何通过按键重置div的背景颜色？

嘿，你已经搞定鼠标悬停变色的功能，这步做得不错！不过按键没反应的问题，主要有两个核心点需要调整，我来帮你一步步解决：

问题1：div默认没法接收键盘事件 #

浏览器里，div这类块级元素默认是没有焦点的，所以你按键盘的时候，事件根本触发不到div上。解决办法很简单，给每个colorCell div加上tabindex="0"属性，让它能被聚焦——这样用户点击div，或者按Tab键切换到div上后，键盘事件就能生效了。

问题2：函数调用和样式修改的细节优化 #

你之前在事件里传this.style其实没必要，直接传元素本身this就行，然后在函数里修改element.style.backgroundColor，逻辑更清晰。另外如果把两个函数放同一个脚本块导致悬停失效，大概率是脚本加载顺序的问题——记得把脚本放在HTML内容的末尾（</body>标签之前），等页面元素都加载完再执行脚本，就不会出问题啦。

修改后的完整代码示例 #

HTML部分

<body>
  <div class="colorCell" tabindex="0" onmouseover="randomColor(this)" onkeydown="resetColor(event, this)">
  </div>
  <div class="colorCell" tabindex="0" onmouseover="randomColor(this)" onkeydown="resetColor(event, this)">
  </div>
  <div class="colorCell" tabindex="0" onmouseover="randomColor(this)" onkeydown="resetColor(event, this)">
  </div>

  <!-- 脚本放这里，确保元素加载完成 -->
  <script>
    function randomColor(element) {
      const x = Math.floor(Math.random() * 256);
      const y = Math.floor(Math.random() * 256);
      const z = Math.floor(Math.random() * 256);
      const bgColor = `rgb(${x}, ${y}, ${z})`;
      console.log(bgColor);
      element.style.backgroundColor = bgColor;
    }

    function resetColor(event, element) {
      // 可以指定按键触发，比如回车键（13）或空格键（32）
      if (event.keyCode === 13 || event.keyCode === 32) {
        element.style.backgroundColor = '#ffff99';
      }
      // 如果想任意按键都重置，删掉上面的if判断，直接保留下面这行
      // element.style.backgroundColor = '#ffff99';
    }
  </script>
</body>

CSS部分

body {
  background-color: lightblue;
}

.colorCell {
  border: 1px solid black;
  width: 10px;
  padding: 5px;
  background-color: #ffff99;
  border-radius: 0px;
  /* 可选：加上焦点样式，让用户清楚当前哪个div有焦点 */
  outline: none;
}

.colorCell:focus {
  box-shadow: 0 0 0 2px #333;
}

额外说明 #

• 加了tabindex="0"后，用户可以通过点击div或者Tab键切换焦点到目标div，之后按指定按键就能重置颜色了。
• 我在resetColor里加了按键判断，避免随便按一个键就触发重置，你可以根据自己的需求调整触发的按键~

备注：内容来源于stack exchange，提问作者Zachary Breen