JS 在单击按钮时显示隐藏

在网页开发中，经常会遇到需要在用户点击按钮后显示或隐藏某个元素的情况。这时候就可以使用 JavaScript 来实现这个功能。

HTML

我们先来看一下 HTML 的代码，假设我们有一个 id 为 myDiv 的 div 元素，以及一个 id 为 myButton 的 button 元素，代码如下：

<div id="myDiv">这是一个 div 元素</div>
<button id="myButton">点击我！</button>

CSS

为了方便我们演示，我们需要对 myDiv 进行一些样式定义。这里我们通过 CSS 来将 myDiv 隐藏起来：

#myDiv {
  display: none;
}

JavaScript

下面是 JavaScript 的代码，实现了当用户点击 myButton 后，显示或隐藏 myDiv 这个元素的功能：

const myDiv = document.getElementById('myDiv');
const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() {
  if (myDiv.style.display === 'none') {
    myDiv.style.display = 'block';
  } else {
    myDiv.style.display = 'none';
  }
});

我们首先通过 getElementById 方法获取到 myDiv 和 myButton 这两个元素，然后通过 addEventListener 方法来为 myButton 添加一个 click 事件的监听器。

当用户点击 myButton 后，监听器中的函数会被调用。在这个函数中，我们使用 if 语句来判断 myDiv 当前的 display 样式属性值。如果是 none，则将它改为 block，这样 myDiv 就显示了出来。如果不是 none，则将它改为 none，这样 myDiv 就被隐藏起来了。

结论

在本文中，我介绍了如何使用 JavaScript 来实现在单击按钮时显示或隐藏某个元素的功能。这种技术在网页开发中非常常见，掌握了这种技能，对于我们的工作效率和开发质量都有很大的提升作用。