隐藏和显示按钮单击反应 JS 功能组件

在前端开发中，经常需要实现一些按钮点击后隐藏或显示某些元素的效果。本文介绍一种实现此效果的 JS 功能组件。

功能实现

我们可以通过 JS 中的 addEventListener() 方法给按钮添加一个点击事件监听器，然后在监听器中实现隐藏或显示元素的逻辑。

以下是一个示例代码片段：

const button = document.getElementById('myButton');
const element = document.getElementById('myElement');

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

上述代码中，我们首先通过 document.getElementById() 方法获取到 HTML 中的按钮和需要隐藏或显示的元素，然后添加了一个点击事件监听器，当按钮被点击时，根据元素当前的显示状态来判断是显示还是隐藏元素。这里我们使用 display 样式属性来实现元素的显示和隐藏。

使用方式

在 HTML 文件中引用 JS 文件，并给按钮和需要隐藏或显示的元素添加相应的 ID：

<button id="myButton">点击我</button>
<div id="myElement">这是需要隐藏或显示的元素</div>

将上述 JS 代码保存到一个 js 文件中，然后在 HTML 文件中引用该 JS 文件即可：

<script src="path/to/my.js"></script>

总结

本文介绍了一种使用 JS 实现隐藏或显示元素的方法，仅供参考使用。实现同样效果的方法还有很多，可以根据具体需求进行选择。