关于display：none的恢复问题或取消display：none属性

最新推荐文章于 2025-03-09 15:58:11 发布

liangshiyun1

最新推荐文章于 2025-03-09 15:58:11 发布

阅读量1.4w

点赞数 4

文章标签： css 前端 html javascript

本文链接：https://blog.csdn.net/liangshiyun1/article/details/125951438

版权

这篇博客介绍了如何使用JavaScript的getElementsByClassName方法和style.display属性来控制HTML元素的隐藏与显示。通过示例代码展示了当点击按钮时，如何将多个h1标题元素的display属性设置为none使其隐藏，以及如何恢复显示这些元素。这为网页交互提供了基础的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个问题其实非常简单，当我们用display：none隐藏了某些元素的时候，想要恢复时，直接用将这些或这个元素本身的display：none更改为display：""就行。下面放例子进行说明：

（该例子的主要功能是将三个h1标题通过按钮控制其隐藏与恢复。）

网页界面起始如下：

源代码如下：

<!doctype html>
<html>

<body>
<!--****定义文字内容****-->
<h1 class="headline">第一</h1>
<p>这是第一段</p>
<h1 class="headline">第二</h1>
<p>这是第二段</p>
<h1 class="headline">第三</h1>
<p>这是第三段</p>

<!--****定义隐藏标题和恢复标题的按钮****-->
<button onclick="myFunction()">hide</button>
<button onclick="myFunction2()">恢复</button>

<!--****定义按钮触发的函数****-->
<script>
  function myFunction(){
   var x = document.getElementsByClassName("headline");
   for(var i=0;i<x.length;i++)
   {
      x[i].style.display="none";
   }
  }
  function myFunction2(){
 var x = document.getElementsByClassName("headline");
 for(var i=0;i<x.length;i++)
 {
	x[i].style.display="";
 }
}
</script>
</body>
</html>

点击hide时，执行myFunction（）函数，将h1标题的display属性值均逐一设置为none,h1标题消失不显示；效果图如下:

点击恢复时，执行myFunction2（）函数，将h1标题的display属性值均逐一设置为"",h1标题恢复显示。效果图如下：

关于display：none的恢复问题 或取消display：none属性

关于display：none的恢复问题或取消display：none属性