Heim > Artikel > Web-Frontend > Anzeige oder Sichtbarkeit, um HTML-Elemente auszublenden
Anzeige oder Sichtbarkeit, um HTML-Elemente auszublenden
- 高洛峰Original
- 2017-03-02 14:46:121184Durchsuche
Steuern Sie die Anzeige oder das Ausblenden von HTML-Elementen auf Webseiten basierend auf bestimmten Bedingungen. Dies kann durch Anzeige oder Sichtbarkeit erreicht werden. Hier ist ein einfaches Beispiel als Referenz.
Manchmal müssen wir anhand bestimmter Bedingungen steuern, ob die HTML-Elemente auf der Webseite angezeigt oder ausgeblendet werden. Dies kann durch Anzeige oder Sichtbarkeit erreicht werden. Verstehen Sie den Unterschied zwischen Anzeige und Sichtbarkeit anhand des folgenden Beispiels. Der einfache Beispielcode lautet wie folgt:
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=='block') p1.style.display='none';
else p1.style.display='block';
if(p2.style.display=='block') p2.style.display='none';
else p2.style.display='block';
}
function showAndHidden2(){
var p3=document.getElementById("p3");
var p4=document.getElementById("p4");
if(p3.style.visibility=='visible') p3.style.visibility='hidden';
else p3.style.visibility='visible';
if(p4.style.visibility=='visible') p4.style.visibility='hidden';
else p4.style.visibility='visible';
}
</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>
Weitere Artikel zum Thema Anzeige oder Sichtbarkeit zum Ausblenden von HTML-Elementen finden Sie auf der chinesischen PHP-Website!