用键盘用JavaScript点亮一个盒子

Question

当按下某个按键时，如何使特定的按键在屏幕上亮起？ 例如，如果我按M，我希望中间的框点亮

Answer 1

在这里，我们列出了关键点，并寻找实现该类的项目并添加了突出显示。 （注意：如果要多个，请使用querySelectorAll和forEach）

 const findDiv = (key) => { let className = `.key${key}`; return document.querySelector(className); }; document.addEventListener('keydown', (e) => { let div = findDiv(e.key); if(div) div.classList.add('highlight'); }); document.addEventListener('keyup', (e) => { document.querySelectorAll('.item').forEach(d => d.classList.remove('highlight')); }); 

 .highlight { background-color: yellow; } 

 <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>