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!
Was ist ein verstecktes Element in jquery?
vcruntime140.dll kann nicht gefunden werden und die Codeausführung kann nicht fortgesetzt werden
Wie viel entspricht Snapdragon 8gen2 Apple?
Verhindern Sie die Verwendung von default()
Was sind die Voraussetzungen für eine Douyin-Liveübertragung?
So passen Sie die Mausempfindlichkeit an
Warum Webstorm die Datei nicht ausführen kann
Was ist der Unterschied zwischen PHP7 und PHP8?
