使用 javaScript 击键后更改 css Display 属性答案

【问题标题】：Changing css Display property once a key is hit with javaScript使用 javaScript 击键后更改 css Display 属性
【发布时间】：2020-10-14 02:34:27
【问题描述】：

我想添加一个事件监听器或类似的东西，当在搜索栏中键入一个键时，将 CSS 中的 character 类的显示从 none 更改为 grid。我尝试了几种方法，但运气不佳，也不太确定如何使用它。我还想让元素可点击。任何帮助将不胜感激。代码

HTML

  
    文档
      ✨哈利波特人物 ✨
      
        
      
      

    正文>

标签： javascript css

【解决方案1】：

所以

所以我想添加一个事件监听器或类似的东西，当在搜索栏中键入一个键时，将 css 中“字符”类的显示从“无”更改为“网格”。

您可以通过应用事件监听器（即按键事件监听器）来做到这一点 - 在该函数回调中，只需使用 element.classlist.toggle 或 element.classlist.add 将另一个类添加到具有网格显示的元素。

另一种方法是使用事件侦听器进行您选择的按键操作，但在回调中，编辑相关元素的样式 - 所以

addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
      element.style.display="grid";

    // to make the element clickable - just add another event listener to it - 
    }
});

对于任何被按下的键，事件监听器都是 keydown -

https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event

addEventListener('keydown', function (e) {
        
          element.style.display="grid"; 
    
    });

希望对您有所帮助 - W

【讨论】：

谢谢！在第二个选项中，你如何让它在任何键上工作而不是仅仅输入？
就像在按下的任何键上一样，无论它是什么键？那就是按键 - 我已经更新了我的答案
是的，只要按下任意键，就会有一个函数开始映射数据并在 html 中填充一个列表。现在列表类character 设置为不显示，我希望在第一次在搜索栏中输入任何键时将其更改为“网格”。我确定答案在您提供的代码中，但我还没有让它工作。
将其放入 chrome 开发工具或任何开发工具中，例如 :::: document.addEventListener('keypress', ()=>{ console.log('code will run') } )
div.classList.toggle("grid");