element.style如何控制元素的显示隐藏 - 问答

要使用element.style控制元素的显示和隐藏，您可以更改元素的CSS样式属性display。以下是如何使用element.style来显示和隐藏一个元素的示例：

HTML:

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

<p id="myElement">Hello, World!</p>
<button onclick="toggleDisplay()">Toggle Display</button>

<script>
  function toggleDisplay() {
    var element = document.getElementById("myElement");
    if (element.classList.contains("hidden")) {
      element.classList.remove("hidden");
    } else {
      element.classList.add("hidden");
    }
  }
</script>

</body>
</html>

在这个示例中，我们有一个名为myElement的段落元素和一个按钮。当用户点击按钮时，将调用toggleDisplay函数。这个函数检查元素是否包含hidden类。如果包含，它将删除该类以显示元素；如果不包含，它将添加该类以隐藏元素。hidden类在CSS中定义了display: none;属性，从而隐藏了元素。

0 赞

0 踩