首頁 > 文章 > web前端 > html如何控制元素顯示和隱藏

html如何控制元素顯示和隱藏

coldplay.xixi原創: 2021-03-04 13:44:2811600瀏覽

html控制元素顯示與隱藏的方法：1、使用display方法隱藏，程式碼為【div1.style.display='none'】；2、使用visibility方法顯示，程式碼為【div3.style. visibility='hidden'】。

html如何控制元素顯示和隱藏

本教學操作環境：windows7系統、html5版，DELL G3電腦。

html控制元素顯示和隱藏的方法：

有些時候我們需要根據某些條件來控制Web頁面中的HTML元素顯示還是隱藏，可以透過display或visibility來實現。透過下面的範例了解display和visibility的區別，簡單的範例程式碼如下：

<html>
<head>
<title>HTML元素的显示与隐藏控制</title>
<script type="text/javascript">
function showAndHidden1(){
  var div1=document.getElementById("div1");
  var div2=document.getElementById("div2");
  if(div1.style.display==&#39;block&#39;) div1.style.display=&#39;none&#39;;
  else div1.style.display=&#39;block&#39;;
  if(div2.style.display==&#39;block&#39;) div2.style.display=&#39;none&#39;;
  else div2.style.display=&#39;block&#39;;
}
 
function showAndHidden2(){
  var div3=document.getElementById("div3");
  var div4=document.getElementById("div4");
  if(div3.style.visibility==&#39;visible&#39;) div3.style.visibility=&#39;hidden&#39;;
  else div3.style.visibility=&#39;visible&#39;;
  if(div4.style.visibility==&#39;visible&#39;) div4.style.visibility=&#39;hidden&#39;;
  else div4.style.visibility=&#39;visible&#39;;
}
</script>
</head>
<body>
<div>display：元素的位置不被占用</div>
<div id="div1" style="display:block;">DIV 1</div>
<div id="div2" style="display:none;">DIV 2</div>
<input type="button" οnclick="showAndHidden1();" value="DIV切换" />
<hr>
<div>visibility：元素的位置仍被占用</div>
<div id="div3" style="visibility:visible;">DIV 3</div>
<div id="div4" style="visibility:hidden;">DIV 4</div>
<input type="button" οnclick="showAndHidden2();" value="DIV切换" />
</body>
</html>

#相關學習推薦：html影片教學

以上是html如何控制元素顯示和隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML怎麼設定表格單元格顏色下一篇：HTML怎麼設定表格單元格顏色

看更多