Heim >Web-Frontend >HTML-Tutorial >HTML-Elemente durch Anzeige oder Sichtbarkeit ein- und ausblenden

HTML-Elemente durch Anzeige oder Sichtbarkeit ein- und ausblenden

不言
不言Original
2018-05-08 14:45:002127Durchsuche

Dieser Artikel stellt hauptsächlich das Anzeigen und Ausblenden von HTML-Elementen durch Anzeige oder Sichtbarkeit vor. Jetzt kann ich ihn mit Ihnen teilen.

Wenn Sie ihn verwenden müssen Bestimmte Bedingungen werden verwendet, um die Anzeige oder das Ausblenden von HTML-Elementen in Webseiten zu steuern. Dies kann durch Anzeige oder Sichtbarkeit erreicht werden. Interessierte Freunde können mehr über diesen Artikel erfahren

Manchmal müssen wir die HTML-Elemente in Web steuern Seiten basierend auf bestimmten Bedingungen Das Ein- oder Ausblenden von HTML-Elementen kann durch Anzeige oder Sichtbarkeit erreicht werden. Verstehen Sie den Unterschied zwischen Anzeige und Sichtbarkeit anhand des folgenden Beispiels:

Kopieren Sie den Code

Der Code lautet wie folgt:

<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==&#39;block&#39;) p1.style.display=&#39;none&#39;; 
else p1.style.display=&#39;block&#39;; 
if(p2.style.display==&#39;block&#39;) p2.style.display=&#39;none&#39;; 
else p2.style.display=&#39;block&#39;; 
} 
function showAndHidden2(){ 
var p3=document.getElementById("p3"); 
var p4=document.getElementById("p4"); 
if(p3.style.visibility==&#39;visible&#39;) p3.style.visibility=&#39;hidden&#39;; 
else p3.style.visibility=&#39;visible&#39;; 
if(p4.style.visibility==&#39;visible&#39;) p4.style.visibility=&#39;hidden&#39;; 
else p4.style.visibility=&#39;visible&#39;; 
} 
</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>

Das obige ist der detaillierte Inhalt vonHTML-Elemente durch Anzeige oder Sichtbarkeit ein- und ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Neue HTML5-FormularelementeNächster Artikel:Neue HTML5-Formularelemente