通过示例使用 JavaScript 隐藏和显示 div

在前端开发中，经常需要使用 JavaScript 对页面元素进行动态操作，其中隐藏和显示 div 也是常用的功能。本篇文章将介绍如何使用 JavaScript 简单地实现此功能。

HTML 结构

首先，需要在 HTML 文件中定义一个 div，其中包含要隐藏或显示的内容。例如，我们可以定义一个 id 为 "myDiv" 的 div，包含一段文字和一个按钮：

<div id="myDiv">
  <p>这是要隐藏或显示的内容。</p>
  <button onclick="toggle()">点击这里隐藏或显示</button>
</div>

JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现点击按钮时隐藏或显示这个 div。我们可以使用 getElementById() 方法获取要操作的 div 元素，然后使用 style.display 属性来控制元素的显示或隐藏。具体来说，如果该属性设置为 "none"，元素就会被隐藏；如果设置为 "block"，元素就会显示出来。

我们可以编写一个名为 toggle() 的函数来切换元素的显示状态。其中，我们可以使用 if 语句来判断当前元素是否可见，如果可见就将其隐藏，否则就将其显示出来。

完整的 JavaScript 代码如下：

function toggle() {
  var myDiv = document.getElementById("myDiv");
  if (myDiv.style.display === "none") {
    myDiv.style.display = "block";
  } else {
    myDiv.style.display = "none";
  }
}

示例演示

现在，我们已经完成了隐藏和显示 div 的 JavaScript 代码。接下来，我们可以在浏览器中运行该页面，当点击按钮时，页面上的 div 将会被切换显示或隐藏。

点击下方的按钮预览效果：

总结

在本文中，我们介绍了如何使用 JavaScript 隐藏和显示 div 元素。我们可以通过使用 DOM 方法获取要操作的元素，然后使用 style 属性控制元素的显示状态。通过本文的示例代码，希望能够帮助读者掌握这个常用的前端开发技巧。