JavaScript虚拟钢琴开发问题：按键按下高亮，松开后恢复原色

嘿，我来帮你搞定这个虚拟钢琴的按键效果！你之前的代码只处理了按键按下的动作，没管按键松开的环节，所以颜色一旦改成金色就再也变不回去了。咱们得同时监听keydown和keyup两个事件，才能实现“按住变色、松开恢复”的效果。

最优方案：用CSS类来控制样式（推荐） #

这种方法最灵活，以后要改颜色或者其他样式，直接改CSS就行，不用动JS代码：

首先在CSS里定义一个激活状态的类：

.piano-key.active {
  background-color: gold;
  /* 还可以加其他效果，模拟真实按键按下的感觉 */
  box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

然后修改你的JS代码，监听两个键盘事件：

const myDoKey = document.getElementById("mydo");

// 按键按下时添加激活类
document.addEventListener('keydown', function(e) {
  if (e.keyCode === 83) { // 83对应键盘上的S键
    DO(); // 播放DO音的函数
    myDoKey.classList.add('active');
  }
});

// 按键松开时移除激活类
document.addEventListener('keyup', function(e) {
  if (e.keyCode === 83) {
    myDoKey.classList.remove('active');
  }
});

为什么不推荐直接修改style？ #

你之前用a.style.background = 'gold'的问题在于，一旦修改了行内样式，原来的样式就被覆盖了，除非提前保存原来的背景色，不然没法轻松恢复。比如这种写法：

const myDoKey = document.getElementById("mydo");
let originalBg;

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 83) {
    DO();
    // 获取元素当前的真实背景色（包括CSS里定义的）
    originalBg = window.getComputedStyle(myDoKey).backgroundColor;
    myDoKey.style.backgroundColor = 'gold';
  }
});

document.addEventListener('keyup', function(e) {
  if (e.keyCode === 83) {
    myDoKey.style.backgroundColor = originalBg;
  }
});

这种写法不如用类优雅，而且如果元素的背景是继承来的或者用了复杂样式，getComputedStyle拿到的值可能会有兼容性问题，所以还是推荐用CSS类的方式～

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