javascript显示和隐藏—代码示例

温馨提示：这篇文章已超过230天没有更新，请注意相关的内容是否还可用！

JavaScript中可以通过修改元素的display属性来实现显示和隐藏的效果。display属性可以设置为多个值，其中包括"none"、"block"、"inline"等。当display属性设置为"none"时，元素将被隐藏，不占据页面空间；当display属性设置为其他值时，元素将被显示出来。

下面是一个示例代码，演示了如何通过JavaScript来显示和隐藏一个元素：


<!DOCTYPE html>
<html>
<head>
  <style>
    .hidden-element {
      display: none;
    }
  </style>
</head>
<body>
  <button onclick="toggleElement()">点击切换元素的显示状态</button>
  <div id="myElement" class="d8a5-bb32-8b37-0f20 hidden-element">
    我是一个被隐藏的元素
  </div>
  <script>
    function toggleElement() {
      var element = document.getElementById("myElement");
      if (element.style.display === "none") {
        element.style.display = "block";
      } else {
        element.style.display = "none";
      }
    }
  </script>
</body>
</html>

在上面的示例中，我们首先定义了一个CSS样式，将class为"hidden-element"的元素的display属性设置为"none"，即初始状态下元素是被隐藏的。

然后，在JavaScript部分，我们定义了一个名为toggleElement的函数。当点击按钮时，该函数会被调用。函数中，我们首先通过`document.getElementById("myElement")`来获取到id为"myElement"的元素。然后，我们通过判断元素的display属性，来决定是显示还是隐藏元素。如果元素的display属性为"none"，则将其设置为"block"，即显示元素；如果元素的display属性为其他值，则将其设置为"none"，即隐藏元素。

通过这种方式，我们可以实现在点击按钮时，切换元素的显示状态。

javascript显示和隐藏—代码示例

相关阅读