Question

我试图使用键盘，所以当我按1时，它会更改文本的颜色。香港专业教育学院增加了键盘功能，所以当我按1时，它会被识别，将其连接到我苦苦挣扎的文本。我有一种感觉，我需要添加一个keyListener，但是我尝试了这个，它似乎没有用。有什么建议么？谢谢

window.addEventListener("keydown", checkKeyPressed, false);
 
function checkKeyPressed(e) {
    if (e.keyCode == "49") {
        alert("The '1' key is pressed.");
        
    }
}




window.addEventListener("keydown", moveSomething, false);
 
function moveSomething(e) {
    switch(e.keyCode) {
        case 37:
        alert("The 'left arrow key' is pressed")
            // left key pressed
            break;
        case 38:
            // up key pressed
            alert("The 'up arrow key' is pressed")
            break;
        case 39:
        alert("The 'right arrow key' is pressed")
            // right key pressed
            break;
        case 40:
        alert("The 'down arrow key' is pressed")
            // down key pressed
            break;  
    }   
}


document.onkeydown = keydown; 

function keydown (evt) { 

    if (!evt) evt = event; 

    if (evt.ctrlKey && evt.altKey && evt.keyCode === 115) {

        alert("CTRL+ALT+F4"); 

    } else if (evt.shiftKey && evt.keyCode === 9) { 

        alert("Shift+TAB");

    } 

}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
<h1>

</h1>

</head>
<body>
<html>
   <head>
      <title>JavaScript String fontcolor() Method</title>
   </head>


<div class="grid-container">
  <div class="item keyShift">1</div>
  <div class="item keyArrowDown">2</div>
  <div class="item keyArrowUp">3</div>
  <div class="item keyArrowLeft">4</div>
  <div class="item keyArrowRight">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

</body>

Answer 1

这比您想象的要容易。首先，我们需要选择您的元素，可以使用id，class甚至是标签名来完成此操作：

const myElement = document.getElementsByClassName('keyShift')[0]

请注意该行结尾处的[0]；因为getElementsByClassName返回具有指定类名的所有元素的数组，所以您需要告诉它想要哪个。如果您的DOM中只有一个具有该类的元素，则可以选择该数组的第一个也是唯一的索引。

现在可以更改颜色，就像：

myElement.style.color = 'red'

您可以将red替换为所需的值！

Answer 2

我相信您正在寻找这样的东西：

window.addEventListener("keydown", checkKeyPressed, false);
 
function checkKeyPressed(e) {
    if (e.keyCode == "49") {
        alert("The '1' key is pressed.");
            document.getElementsByClassName('one')[0].style.color="red";  //replace with whatever color you would like
        
    }
    if (e.keyCode == "50") {
        alert("The '2' key is pressed.");
            document.getElementsByClassName('two')[0].style.color="red"; //replace with whatever color you would like
        
    }
     // do the same for the rest of the numbers
}




window.addEventListener("keydown", moveSomething, false);
 
function moveSomething(e) {
    switch(e.keyCode) {
        case 37:
        alert("The 'left arrow key' is pressed")
            // left key pressed
            break;
        case 38:
            // up key pressed
            alert("The 'up arrow key' is pressed")
            break;
        case 39:
        alert("The 'right arrow key' is pressed")
            // right key pressed
            break;
        case 40:
        alert("The 'down arrow key' is pressed")
            // down key pressed
            break;  
    }   
}


document.onkeydown = keydown; 

function keydown (evt) { 

    if (!evt) evt = event; 

    if (evt.ctrlKey && evt.altKey && evt.keyCode === 115) {

        alert("CTRL+ALT+F4"); 

    } else if (evt.shiftKey && evt.keyCode === 9) { 

        alert("Shift+TAB");

    } 

}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
<h1>

</h1>

</head>
<body>
<html>
   <head>
      <title>JavaScript String fontcolor() Method</title>
   </head>


<div class="grid-container">
  <div class="item one keyShift">1</div>
  <div class="item two keyArrowDown">2</div>
  <div class="item three keyArrowUp">3</div>
  <div class="item four keyArrowLeft">4</div>
  <div class="item five keyArrowRight">5</div>
  <div class="item six">6</div>
  <div class="item seven">7</div>
  <div class="item eight">8</div>
  <div class="item nine">9</div>
</div>

</body>

您需要[0]，因为该方法将返回具有该类名称的所有元素（即使只有一个，也将存在HTML元素数组。）

Answer 3

另外两个答案使我不胜其烦，但是为了更多示例：

// color map, for example purposes
const colorMap = {
  49: 'white',
  50: 'pink',
  51: 'orange',
  52: 'yellow',
  53: 'blue',
}

// track keypress, since it covers up/down
function checkKeyPressed(e) {
    // attemp to grab the color from the existing map. If its not there, this will be null
    const color = colorMap[e.keyCode];

    // if color is mapped, 
    if (color) {
      document
        .querySelector('.color-container')
        .style
        // if you're using CSS variables...
        .setProperty('color', `var(--${color})`)
        // or, if you don't want to use variables...
        // .setProperty('color', INSERT_YOUR_COLOR_HEX_HERE)
    }
}

window.addEventListener("keypress", checkKeyPressed, false);

关键逻辑在if循环中，基本上，您可以获取要更改的DOM元素，访问其“样式”属性，然后将颜色更改为所需的颜色。保留颜色图对象可以更轻松地跟踪要启用的颜色。

Plunkr Demo

如何连接我的功能checkKeyPressed以更改javascript中文本的颜色？

3 个答案: