关于display：none的恢复问题 或取消display：none属性
关于display：none的恢复问题 或取消display：none属性；通过display属性来设置元素的不显示及其恢复。
·
这个问题其实非常简单，当我们用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标题恢复显示。效果图如下：
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)