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

发布时间：2022-03-15 17:19:02 作者：iii
来源：亿速云阅读：185

本篇内容介绍了“怎么通过display或visibility实现HTML元素的显示与隐藏”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

代码如下：

　　<html>

　　<head>

　　<title>HTML元素的显示与隐藏控制</title>

　　<scripttype="text/javascript">

　　functionshowAndHidden1(){

　　vardiv1=document.getElementById("div1");

　　vardiv2=document.getElementById("div2");

　　if(div1.style.display=='block')div1.style.display='none';

　　elsediv1.style.display='block';

　　if(div2.style.display=='block')div2.style.display='none';

　　elsediv2.style.display='block';

　　}

　　functionshowAndHidden2(){

　　vardiv3=document.getElementById("div3");

　　vardiv4=document.getElementById("div4");

　　if(div3.style.visibility=='visible')div3.style.visibility='hidden';

　　elsediv3.style.visibility='visible';

　　if(div4.style.visibility=='visible')div4.style.visibility='hidden';

　　elsediv4.style.visibility='visible';

　　}

　　</script>

　　</head>

　　<body>

　　<div>display：元素的位置不被占用</div>

　　<divid="div1"style="display:block;">DIV1</div>

　　<divid="div2"style="display:none;">DIV2</div>

　　<inputtype="button"onclick="showAndHidden1();"value="DIV切换"/>

　　<hr>

　　<div>visibility：元素的位置仍被占用</div>

　　<divid="div3"style="visibility:visible;">DIV3</div>

　　<divid="div4"style="visibility:hidden;">DIV4</div>

　　<inputtype="button"onclick="showAndHidden2();"value="DIV切换"/>

　　</body>

　　</html>

“怎么通过display或visibility实现HTML元素的显示与隐藏”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！

相关阅读