JS 控制 div 显示隐藏|极客笔记

JS 控制 div 显示隐藏

在网页开发中，经常需要通过JavaScript来控制页面上的元素显示和隐藏。其中，对于div元素的显示隐藏操作是比较常见的。

通过CSS实现div的显示和隐藏

在CSS中，可以通过设置display属性来控制元素的显示和隐藏。常用的取值有：

none: 元素隐藏，不保留空间
block: 元素以块级元素显示
inline: 元素以行内元素显示

以下是一个简单的示例，通过CSS来实现div元素的显示和隐藏：

<!DOCTYPE html>
<html>
<head>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <div id="myDiv" class="hidden">
    这是一个隐藏的div元素
  </div>
</body>
</html>

在上面的示例中，通过设置display: none;来将id为myDiv的div元素隐藏起来。

通过JavaScript实现div的显示和隐藏

除了通过CSS来控制div的显示和隐藏外，也可以通过JavaScript来实现。通过JavaScript可以动态地改变元素的CSS属性，以达到隐藏或显示的效果。

以下是一个使用JavaScript来控制div元素显示和隐藏的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .hidden {
      display: none;
    }
  </style>
  <script>
    function toggleVisibility() {
      var div = document.getElementById("myDiv");
      if (div.style.display === "none") {
        div.style.display = "block";
      } else {
        div.style.display = "none";
      }
    }
  </script>
</head>
<body>
  <button onclick="toggleVisibility()">点击切换显示/隐藏</button>
  <div id="myDiv" class="hidden">
    这是一个隐藏的div元素
  </div>
</body>
</html>

在上面的示例中，通过定义一个toggleVisibility函数来切换div元素的显示和隐藏状态。点击按钮后，会触发该函数，从而实现元素的切换效果。

通过jQuery实现div的显示和隐藏

除了原生JavaScript外，也可以使用流行的JavaScript库jQuery来实现div元素的显示和隐藏。jQuery提供了更方便的操作DOM元素的方法，使得控制显示隐藏更加简洁易用。

以下是一个使用jQuery来控制div元素显示和隐藏的示例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
     $(document).ready(function() {$ ("#toggleButton").click(function() {
        $("#myDiv").toggle();
      });
    });
  </script>
</head>
<body>
  <button id="toggleButton">点击切换显示/隐藏</button>
  <div id="myDiv" style="display: none;">
    这是一个隐藏的div元素
  </div>
</body>
</html>

在上面的示例中，通过引入jQuery库后，使用$("#myDiv").toggle();来切换div元素的显示和隐藏状态。