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

最新推荐文章于 2025-05-09 16:28:44 发布

原创最新推荐文章于 2025-05-09 16:28:44 发布 · 1.5w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html #javascript

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

该文章已生成可运行项目，

这个问题其实非常简单，当我们用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标题消失不显示；效果图如下: