通过display或visibility来实现HTML元素的显示与隐藏

互联网 18-5-8

这篇文章主要介绍了关于通过display或visibility来实现HTML元素的显示与隐藏，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现，感兴趣的朋友可以了解下本文

复制代码

代码如下:

<html>   <head>   <title>HTML元素的显示与隐藏控制</title>   <script type="text/javascript">   function showAndHidden1(){   var p1=document.getElementById("p1");   var p2=document.getElementById("p2");   if(p1.style.display=='block') p1.style.display='none';   else p1.style.display='block';   if(p2.style.display=='block') p2.style.display='none';   else p2.style.display='block';   }   function showAndHidden2(){   var p3=document.getElementById("p3");   var p4=document.getElementById("p4");   if(p3.style.visibility=='visible') p3.style.visibility='hidden';   else p3.style.visibility='visible';   if(p4.style.visibility=='visible') p4.style.visibility='hidden';   else p4.style.visibility='visible';   }   </script>   </head>   <body>   <p>display：元素的位置不被占用</p>   <p id="p1" style="display:block;">p 1</p>   <p id="p2" style="display:none;">p 2</p>   <input type="button" onclick="showAndHidden1();" value="p切换" />   <hr>   <p>visibility：元素的位置仍被占用</p>   <p id="p3" style="visibility:visible;">p 3</p>   <p id="p4" style="visibility:hidden;">p 4</p>   <input type="button" onclick="showAndHidden2();" value="p切换" />   </body>   </html>

以上就是通过display或visibility来实现HTML元素的显示与隐藏的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： html