温馨提示×

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

小樊
110
2024-10-10 00:14:36
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

要使用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;属性,从而隐藏了元素。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:如何使用element.style调整元素尺寸

0