问题：无法将样式更改为 JavaScript 中的“点击”事件

Question

1)

• 我的目标是在按下一个键（在这种情况下为“a”）后更改声音按钮的样式。
• 按下“a”键后，没有进行任何样式更改，尽管我已经建立了一个与事件链接的 CSS 样式（通过类选择器 .button1）并且有声音。按下“a”后，click() 函数正常工作（因为：声音），但样式没有改变。
• 没有错误信息。

2)

• 我尝试了几件事： .button1:active; .按钮：悬停；将样式放在 JavaScript 行中；通过添加 classList.add('MyClass'); 为每个事件创建一个类；更改 CSS 选择器（. 或 #）。

3)

HTML 文件：

<button onclick="play1()" id="button1" class="button button1">A</button>

<script>
document.addEventListener("keydown", logKey);

            function logKey(){
                if (event.keyCode === 65) {
                    document.getElementById("button1").click();                 
                }
            }
</script>

CSS 文件：

.button1 {
    left: 400;
    bottom: 400;
    position: fixed;
    margin: 0 auto;
    height: 120px;
    width: 120px;
    background-color: rgba(70, 96, 150, 0.6);
    text-align: center;
    font-size: 16px;
    border-style: solid; 
    border-color: black;
    border-width: 4px;
    border-radius: 20px;

}

.button1:active {
    background-color: #4CAF50;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    height: 122px;
    width: 122px;
}

谢谢。 PS：我不使用库/框架。

Answer 1

当然，有很多方法可以在 JS 中实现此功能。这是在按下a 键时手动分配类的方法。注意：这也会导致在函数执行时按钮具有:active 伪类。

更新

这里有一个更模块化的起点，您可能想尝试一下。不幸的是，在 vanilla JS 中，您一次只能分配一个事件侦听器（例如，与 jQuery 不同）。这意味着我们需要两个独立的监听器：一个用于keydown，另一个用于keyup。在下面我非常简单的示例中，我正在征用您的 logKey 函数来返回 event.keyCode 是否等于我们感兴趣的键（即 a | 65）。当 logKey() 返回真值时，我们切换按钮的活动类。它在keydown 事件触发时打开，在keyup 事件触发时关闭。

我确信这不是最有说服力的解决方案，但也许它会让您开始走上一条有用的道路。

?

var button = document.querySelector('.button')
var KEY = 65;

var logKey = (event) => {
  return event.keyCode === KEY;
}

var toggleButton = function() { 
  let keyPressed = logKey(event);
  if (keyPressed) {
    button.classList.toggle('button--active');
  }
}
  
var listen = function() {
  window.addEventListener('keydown', toggleButton);
  window.addEventListener('keyup', toggleButton);
}

listen();

.button {
    left: 400;
    bottom: 400;
    position: fixed;
    margin: 0 auto;
    height: 120px;
    width: 120px;
    text-align: center;
    font-size: 16px;
    border-style: solid; 
    border-color: black;
    border-width: 4px;
    border-radius: 20px;

}

.button--active {
    background-color: #4CAF50;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    height: 122px;
    width: 122px;
}

<button id="button" class="button">A</button>

更新 2

此外，是否有可能直接在我的函数“logKey”中更改样式？

嗯。直接用JavaScript？当然。但我会把这个责任交给 CSS。如果您只是指在该函数中应用一个类......可能。或者，可能是我误会了你。 logKey 函数内的程序化click() 只是以编程方式单击按钮。但是仍然需要有一个在 click 时执行的函数。

这是另一种可能更符合您口味的选择。

document.addEventListener("keydown", logKey);
document.addEventListener("keyup", logKey);

var myButton = document.querySelector('#button');

function logKey(event) {
  if (event.keyCode === 65) {
    myButton.click();
  }
}

function changeItUp() {
  myButton.classList.toggle('button--active');
};

.button {
    left: 400;
    bottom: 400;
    position: fixed;
    margin: 0 auto;
    height: 120px;
    width: 120px;
    text-align: center;
    font-size: 16px;
    border-style: solid; 
    border-color: black;
    border-width: 4px;
    border-radius: 20px;

}

.button--active,
.button:active {
    background-color: #4CAF50;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    height: 122px;
    width: 122px;
}

<button onclick="changeItUp()" id="button" class="button">A</button>

Answer 2

<button onclick="play1()" id="button1" class="button button1">A</button>

确保 .button1:active ?.button1+active

这将阻止按钮在右键单击时突出显示，因为只要元素处于活动状态，“:”就会响应。

.button1+active {
    background-color: #4CAF50;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    height: 122px;
    width: 122px;
}

可以从 mousedown 事件中捕获按钮属性，只要不是左键单击（即不等于 1），我们就会返回。

---

另一方面，如果背景不是“rgb(76, 175, 80)”，即“#4CAF50”的rgb，那么我们添加颜色，否则我们将颜色设置为“”。

<script>
  document.addEventListener("mousedown", logKey);
  
  function logKey() {
    var elem = document.getElementById("button1")
    
    if ("buttons" in window.event && (window.event.target.id === "button1")) {
      if (window.event.buttons !== 1) {
        return
      } else {
        if (elem.style.backgroundColor !== "rgb(76, 175, 80)") {
          elem.style.backgroundColor = "#4CAF50";
        } else {
          elem.style.backgroundColor = "";
        }
      }
    }
  }
    
  function play1(){
    // console.log("elem")
  }  
  
</script>