JS 隐藏 div|极客笔记

JS 隐藏 div

在网页开发中，常常会遇到需要隐藏或显示某个元素的情况。其中，使用 JavaScript 来控制元素的隐藏和显示是一种常见的方法。本文将介绍如何使用 JavaScript 来隐藏一个 div 元素，并给出相关的示例代码。

通过样式改变显示状态

在 HTML 中，可以通过为元素添加 style 属性来改变其显示状态。下面是一个简单的示例代码，演示如何通过 JavaScript 改变一个 div 元素的显示状态：

<!DOCTYPE html>
<html>
<head>
  <title>隐藏 div</title>
</head>
<body>

<button onclick="hideDiv()">隐藏 div</button>

<div id="myDiv" style="display: block;">
  这是一个需要隐藏的 div 元素。
</div>

<script>
function hideDiv() {
  var div = document.getElementById("myDiv");
  div.style.display = "none";
}
</script>

</body>
</html>

在上面的代码中，我们首先定义了一个 div 元素，并设置了一个 id 属性为 myDiv。然后在 JavaScript 部分定义了一个 hideDiv 函数，该函数通过 document.getElementById 方法获取到 myDiv 元素，并设置其 display 样式为 none，从而实现了隐藏该元素的效果。

通过添加/移除类名改变显示状态

除了直接改变样式属性之外，我们还可以通过为元素添加或移除类名来改变其显示状态。下面是一个示例代码，演示如何通过 JavaScript 添加/移除类名来隐藏一个 div 元素：

<!DOCTYPE html>
<html>
<head>
  <title>隐藏 div</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>

<button onclick="hideDiv()">隐藏 div</button>

<div id="myDiv" class="visible">
  这是一个需要隐藏的 div 元素。
</div>

<script>
function hideDiv() {
  var div = document.getElementById("myDiv");
  div.classList.add("hidden");
}
</script>

</body>
</html>

在上面的代码中，我们在 <style> 标签内定义了一个 .hidden 类，将 display 属性设置为 none。然后在 JavaScript 部分的 hideDiv 函数中，通过 classList.add("hidden") 方法为 myDiv 元素添加了 .hidden 类，从而实现了隐藏该元素的效果。

通过设置元素的 visibility 属性隐藏元素

除了通过 display 属性来隐藏元素之外，我们还可以通过 visibility 属性来控制元素的可见性。下面是一个示例代码，演示如何通过 JavaScript 控制元素的可见性：

<!DOCTYPE html>
<html>
<head>
  <title>隐藏 div</title>
</head>
<body>

<button onclick="hideDiv()">隐藏 div</button>

<div id="myDiv" style="visibility: visible;">
  这是一个需要隐藏的 div 元素。
</div>

<script>
function hideDiv() {
  var div = document.getElementById("myDiv");
  div.style.visibility = "hidden";
}
</script>

</b957a8y>

在上面的代码中，我们设置了一个 myDiv 元素，并将其初始 visibility 属性设置为 visible。然后在 JavaScript 部分的 hideDiv 函数中，通过设置 visibility 属性为 hidden，实现了隐藏该元素的效果。