在前端开发中，常常需要通过点击按钮来触发某些操作和交互效果。其中一个常见的需求是点击按钮后显示或隐藏一个 div 元素。本文将介绍如何使用 JavaScript 实现这个功能。
HTML 结构
首先，我们需要一个 button 元素和一个要显示或隐藏的 div 元素。示例代码如下：
------- -------------------------- ---- ---------- --------------- ------------------------
注意，需要将 div 的 style 属性设为 display: none;，这样初始时该元素就不会显示出来。
JavaScript 代码
接下来，我们可以使用 JavaScript 来实现按钮点击后显示或隐藏 div 的功能。
获取 DOM 元素
首先，我们需要获取到要操作的两个 DOM 元素。可以通过 document.getElementById() 方法来获取它们：
----- ------ - ------------------------------------ ----- --- - ---------------------------------
添加事件监听器
然后，我们需要给按钮添加一个点击事件监听器。可以使用 addEventListener() 方法来实现：
-------------------------------- ---------- - -- ---------------- ---
切换显示状态
最后，我们需要在点击事件监听器中编写代码，根据当前 div 的显示状态，来切换它的显示或隐藏。可以使用 style.display 属性来实现：
-------------------------------- ---------- -
-- ------------------ --- ------- -
----------------- - --------
- ---- -
----------------- - -------
-
---在这段代码中，我们通过判断 div.style.display 的值是否等于 'none' 来确定 div 是否显示。如果当前是隐藏状态，则将 div.style.display 设置为 'block'，使其显示出来；否则，将其设置为 'none'，使其隐藏起来。
示例代码
下面是完整的示例代码：
------- --------------------------
---- ---------- --------------- ------------------------
--------
----- ------ - ------------------------------------
----- --- - ---------------------------------
-------------------------------- ---------- -
-- ------------------ --- ------- -
----------------- - --------
- ---- -
----------------- - -------
-
---
---------通过这个示例，我们可以了解如何使用 JavaScript 实现点击按钮后显示或隐藏 div 元素的功能。希望本文能够对你学习和使用 JavaScript 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30393