如何设置按钮来更改按钮的背景色

How can I set a button to change the background color of a button

本文关键字：按钮 背景色 何设置 设置      更新时间：2024-03-11

我正在尝试制作它，这样我就可以按下a-d，按钮（a、b、c、d）就会变色；当我按下"a"时，a按钮应该变暗，例如，如果我按下"b"，"a"应该变回原来的颜色。"b"将变暗，这可能不是最有效的方法，但这是我能想到的最有效的方式之一。

我的代码：

document.addEventListener("keydown", function(event) {
    if(event.keyCode == 65)
    {
        document.getElementById("a1").style.background='#BFBFBF';
        document.getElementById("b1").style.background='#FFFFFF';
        document.getElementById("c1").style.background='#FFFFFF';
        document.getElementById("d1").style.background='#FFFFFF';
    }
    else if(event.keyCode == 66)
    {
        document.getElementById("b1").style.background='#BFBFBF';
        document.getElementById("c1").style.background='#FFFFFF';
        document.getElementById("d1").style.background='#FFFFFF';
        document.getElementById("a1").style.background='#FFFFFF';
    }
    else if(event.keycode == 67)
    {
        document.getElementById("c1").style.background='#BFBFBF';
        document.getElementById("d1").style.background='#FFFFFF';
        document.getElementById("a1").style.background='#FFFFFF';
        document.getElementById("b1").style.background='#FFFFFF';
    }
    else if(event.keycode == 68)
    {
        document.getElementById("d1").style.background='#BFBFBF';
        document.getElementById("a1").style.background='#FFFFFF';
        document.getElementById("b1").style.background='#FFFFFF';
        document.getElementById("c1").style.background='#FFFFFF';
    }
});
document.addEventListener("keyup", function(event) {
    if(event.keyCode == 65)
    {
        event01()
    }
    else if(event.keyCode == 66)
    {
        event02()
    }
    else if(event.keycode == 67)
    {
        event03()
    }
    else if(event.keycode == 68)
    {
        event04()
    }
});


~function () {
  var opts = {
    65: { button: "a1", handler: eventA },
    66: { button: "b1", handler: eventB },
    67: { button: "c1", handler: eventC },
    68: { button: "d1", handler: eventD }
  };
 
  document.addEventListener("keydown", function (event) {
    var cur = opts[event.keyCode];
    cur && (document.getElementById(cur.button).style.background='#BFBFBF');
  });
  document.addEventListener("keyup", function (event) {
    var cur = opts[event.keyCode];
    if (cur) {
      document.getElementById(cur.button).style.background = '';
      cur.handler();
    }
  });
  function eventA() {}
  function eventB() {}
  function eventC() {}
  function eventD() {}
}();
button {
  background: white;
}
<button id=a1>a</button>
<button id=b1>b</button>
<button id=c1>c</button>
<button id=d1>d</button>

相关文章：