怎么通過display或visibility實現HTML元素的顯示與隱藏

發布時間：2022-03-15 17:19:02 來源：億速云閱讀：185 作者：iii 欄目：web開發

本篇內容介紹了“怎么通過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元素的顯示與隱藏”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本