如何实现按下特定按键时更改div背景颜色

嘿，这个需求其实很好实现，我给你整理了一套简单直接的代码方案，拿来就能用：

1. 先搭好基础HTML结构 #

首先我们需要一个右侧的div，给它一个唯一标识方便后续操作：

<!-- 页面其他内容 -->
<div id="right-panel" class="panel">我是右侧的div</div>

2. 写好基础样式和高亮样式 #

用CSS定义默认状态和高亮状态的视觉区别，这里用背景色切换做示例，你可以根据需求调整成边框、文字色等：

.panel {
  width: 220px;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  background-color: #f5f5f5;
  padding: 20px;
  transition: background-color 0.3s ease; /* 加个过渡动画，切换更丝滑 */
}

/* 高亮状态的样式类 */
.panel.highlight {
  background-color: #ffeaa7; /* 换成你想要的高亮颜色 */
  border-left: 3px solid #fdcb6e;
}

3. 用JavaScript监听按键事件 #

全局监听键盘按下动作，判断是否是目标按键，然后切换高亮类：

// 监听全局键盘按下事件
document.addEventListener('keydown', function(e) {
  // 转成小写判断，避免区分大小写F/f
  if (e.key.toLowerCase() === 'f') {
    const rightPanel = document.getElementById('right-panel');
    // 切换highlight类：有就移除，没有就添加
    rightPanel.classList.toggle('highlight');
  }
});

额外小提示 #

• 如果想要只有在页面特定区域聚焦时才触发，可以把事件监听绑定到对应元素（比如输入框）而不是document
• 替换e.key的值就能适配其他按键，比如"space"（空格）、"d"等
• 高亮样式可以自由扩展，比如添加阴影、放大效果，完全看你的页面需求

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