如何在 JavaScript 中点击按钮后显示 div？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，常常需要通过点击按钮来触发某些操作和交互效果。其中一个常见的需求是点击按钮后显示或隐藏一个 div 元素。本文将介绍如何使用 JavaScript 实现这个功能。

HTML 结构

首先，我们需要一个 button 元素和一个要显示或隐藏的 div 元素。示例代码如下：

<button id="myButton">点击我</button>
<div id="myDiv" style="display: none;">这是要显示或隐藏的内容</div>

注意，需要将 div 的 style 属性设为 display: none;，这样初始时该元素就不会显示出来。

JavaScript 代码

接下来，我们可以使用 JavaScript 来实现按钮点击后显示或隐藏 div 的功能。

获取 DOM 元素

首先，我们需要获取到要操作的两个 DOM 元素。可以通过 document.getElementById() 方法来获取它们：

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

添加事件监听器

然后，我们需要给按钮添加一个点击事件监听器。可以使用 addEventListener() 方法来实现：

button.addEventListener('click', function() {
  // 在这里编写点击按钮后要执行的代码
});

切换显示状态

最后，我们需要在点击事件监听器中编写代码，根据当前 div 的显示状态，来切换它的显示或隐藏。可以使用 style.display 属性来实现：

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

在这段代码中，我们通过判断 div.style.display 的值是否等于 'none' 来确定 div 是否显示。如果当前是隐藏状态，则将 div.style.display 设置为 'block'，使其显示出来；否则，将其设置为 'none'，使其隐藏起来。

示例代码

下面是完整的示例代码：

-- -------------------- ---- -------
------- --------------------------
---- ---------- --------------- ------------------------

--------
----- ------ - ------------------------------------
----- --- - ---------------------------------

-------------------------------- ---------- -
  -- ------------------ --- ------- -
    ----------------- - --------
  - ---- -
    ----------------- - -------
  -
---
---------

通过这个示例，我们可以了解如何使用 JavaScript 实现点击按钮后显示或隐藏 div 元素的功能。希望本文能够对你学习和使用 JavaScript 有所帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/30393