So steuern Sie das Anzeigen und Ausblenden von Elementen in HTML-HTML-Tutorial-php.cn

So steuern Sie das Anzeigen und Ausblenden von Elementen in HTML

coldplay.xixi

Freigeben： 2023-01-03 09:27:35

Original

11644 Leute haben es durchsucht

So steuern Sie das Anzeigen und Ausblenden von HTML-Elementen: 1. Verwenden Sie zum Ausblenden die Anzeigemethode, der Code lautet [div1.style.display='none'] 2. Verwenden Sie zum Anzeigen die Sichtbarkeitsmethode, der Code lautet [; div3.style.visibility='hidden'].

So steuern Sie das Anzeigen und Ausblenden von Elementen in HTML

Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5-Version, DELL G3-Computer.

So steuern Sie das Anzeigen und Ausblenden von HTML-Elementen:

Manchmal müssen wir das Anzeigen oder Ausblenden von HTML-Elementen auf Webseiten basierend auf bestimmten Bedingungen steuern, die durch Anzeige oder Sichtbarkeit erreicht werden können. Lernen Sie den Unterschied zwischen Anzeige und Sichtbarkeit anhand des folgenden Beispiels kennen. Der einfache Beispielcode lautet wie folgt:

<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>

Nach dem Login kopieren

Verwandte Lernempfehlungen: HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo steuern Sie das Anzeigen und Ausblenden von Elementen in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!