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'].
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=='block') div1.style.display='none';
else div1.style.display='block';
if(div2.style.display=='block') div2.style.display='none';
else div2.style.display='block';
}
function showAndHidden2(){
var div3=document.getElementById("div3");
var div4=document.getElementById("div4");
if(div3.style.visibility=='visible') div3.style.visibility='hidden';
else div3.style.visibility='visible';
if(div4.style.visibility=='visible') div4.style.visibility='hidden';
else div4.style.visibility='visible';
}
</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>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!
