javascript 如何改变背景颜色(绿色/红色)在空的HTML在某些按键？

yv5phkfx 于 2023-02-21 发布在 Java

关注(0)|答案(3)|浏览(162)

是否有人有解决方案，如何改变背景颜色的HTML在某些按钮按下，例如字母A。每当我按下按钮A的颜色切换到其他颜色（红色到绿色，或绿色到红色），并保持这种方式。但奖金将是，它的工作时，我不专注于网络浏览器，所以它可以工作时，我使用其他应用程序的浏览器。抱歉noob的问题和语言障碍。谢谢你的答复。
类似于此链接，但应在按键按钮上：how to change different background colors using only one button

JavaScript

来源：https://stackoverflow.com/questions/75504826/how-to-change-background-colors-green-red-in-empty-html-on-certain-keypress

3条答案

按热度按时间

qojgxg4l1#

可以使用JavaScript检测按键事件并更改背景颜色

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Change background color on keypress</title>
  </head>
  <body>
    <p>Press the 'A' key to change the background color!</p>
    <script>
      var colors = ["red", "green"];
      var currentColorIndex = 0;
      document.addEventListener("keypress", function(event) {
        if (event.key === "a" || event.key === "A") {
          var body = document.getElementsByTagName("body")[0];
          body.style.backgroundColor = colors[currentColorIndex];
          currentColorIndex = (currentColorIndex + 1) % colors.length;
        }
      });
    </script>
  </body>
</html>

赞(0）回复(0）举报 2023-02-21

pzfprimi2#

我认为不可能做到当你在另一个窗口按下A键时，键盘会被激活，因为在大多数操作系统中，键盘会自动聚焦到被聚焦的窗口。可能会有一个应用程序，但使用起来真的很不方便（如果你想在那个应用程序中按A键，它会转到你的窗口）。
但是，如果你真的找到了方法，这里是你的答案。作为参考，我会假设你的网站的背景已经是红色的。

let isRed = true;
  document.addEventListener('keydown', (event) => {
    if (event.key === 'a') {
      if (isRed) {
        document.body.style.backgroundColor = 'green';
        isRed = false;
      } else {
        document.body.style.backgroundColor = 'red';
        isRed = true;
      }
    }
  });

赞(0）回复(0）举报 2023-02-21

2q5ifsrm3#

因为样式应该是CSS而不是JavaScript，所以你只需要在<html>元素（document.documentElement）上Element.classList.toggle()一个类（比如."is-active"）：

addEventListener("keydown", (evt) => {
  if (evt.key === "a") document.documentElement.classList.toggle("is-active");
});

.is-active body { background-color: gold; }
/* or like:   .is-active #someID { background-color: gold; } */

对于"ć"键，只需使用该字符而不是"a"

赞(0）回复(0）举报 2023-02-21

我来回答

javascript 如何改变背景颜色(绿色/红色)在空的HTML在某些按键？

3条答案

相关问题

热门标签

最新问答