如何仅在单击时将字母的颜色更改为白色

Question

仅在单击时如何将字母的颜色更改为白色，然后在不再单击时将其更改为开头。

非常感谢您的帮助。

var drum = document.querySelectorAll("button"),
  i;

for (i = 0; i <= drum.length; ++i) {
  var drumi = drum[i];

  var drummy = drumi.addEventListener("click", function() {
    this.style.color = "white";
  });
}

Answer 1

我建议使用2个不同的事件

1. onmousedown用于用户单击元素的时间
2. onmouseup用于用户释放鼠标按钮的时间

建议的代码看起来像这样：

var drum = document.querySelectorAll("button"),
  i;

for (i = 0; i <= drum.length; ++i) {
  var drumi = drum[i];

  drumi.addEventListener("onmousedown", function() {
    this.style.color = "white";
  });

  drumi.addEventListener("onmouseup", function() {
    this.style.color = "black"; // put the original color here
  });
}

Answer 2

仅使用CSS：

button:active {
  color: white;
}

<button>Test</button>

Answer 3

单击按钮时，文字先变白，然后变黑。这是您想要的吗？

JS

let clicked = true
let turnWhite = (button) => {
  clicked = !clicked
  clicked ? button.style.color = "white" : button.style.color = "black"
}

HTML

<button onclick="turnWhite(this)">click</button>