HTML-Elemente durch Anzeige oder Sichtbarkeit verbergen

Manchmal müssen wir steuern, ob HTML-Elemente auf einer Webseite basierend auf bestimmten Bedingungen angezeigt oder ausgeblendet werden. Dies kann durch Anzeige oder Sichtbarkeit erreicht werden. Das folgende Beispiel zeigt den Unterschied zwischen Anzeige und Sichtbarkeit. Der einfache Beispielcode lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

<html>
<Kopf>
<title>Steuerung zum Anzeigen und Ausblenden von HTML-Elementen</title>
<Skripttyp="text/javascript">
Funktion showAndHidden1(){
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
wenn(div1.style.display=='block') div1.style.display='keine';
sonst div1.style.display='block';
wenn(div2.style.display=='block') div2.style.display='keine';
sonst div2.style.display='block';
}
Funktion showAndHidden2(){
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
if(div3.style.visibility=='sichtbar') div3.style.visibility='versteckt';
sonst div3.style.visibility='sichtbar';
if(div4.style.visibility=='sichtbar') div4.style.visibility='versteckt';
sonst div4.style.visibility='sichtbar';
}
</Skript>
</Kopf>
<Text>
<div>Anzeige: Die Position des Elements ist nicht belegt</div>
<div id="div1" style="display:block;">DIV 1</div>
<div id="div2" style="display:none;">DIV 2</div>
<input type="button" onclick="showAndHidden1();" value="DIV-Schalter" />
<hr>
<div>Sichtbarkeit: Die Position des Elements ist noch besetzt</div>
<div id="div3" style="sichtbarkeit:sichtbar;">DIV 3</div>
<div id="div4" style="sichtbarkeit:versteckt;">DIV 4</div>
<input type="button" onclick="showAndHidden2();" value="DIV-Schalter" />
</body>
</html>

<<: Detaillierte Analyse der verschiedenen Hintergründe, Nutzungsszenarien und Techniken von CSS

>>: Zusammenfassung der grundlegenden allgemeinen MySQL-Befehle

Keepalived+Nginx+Tomcat-Beispielcode zur Implementierung eines hochverfügbaren Webclusters

HTML-Elemente durch Anzeige oder Sichtbarkeit verbergen

Keepalived+Nginx+Tomcat-Beispielcode zur Implementierung eines hochverfügbaren Webclusters

Zusammenfassung der Methoden zum Einbinden von Dateiinhalten in HTML-Dateien

Erläuterung der Faktoren, die die Datenbankleistung in MySQL beeinflussen

Analysieren Sie den Unterschied zwischen berechnet und beobachtet in Vue

Verwenden der Docker+Jenkins+Python3-Umgebung zum Erstellen eines äußerst detaillierten Tutorials

Vue implementiert den Anwesenheitskalender von DingTalk

Detaillierte Erklärung der CSS3-Animation und der neuen Funktionen von HTML5

Hinweise zum passenden MySql 8.0 und entsprechenden Treiberpaketen

Eine kurze Analyse der zugrunde liegenden Prinzipien von MySQL-Transaktionen und Isolationsebenen

Verwenden von vue3 zum Implementieren eines Beispiels für die Kapselung von Zählfunktionskomponenten

Artikel empfehlen

JS removeAttribute()-Methode zum Löschen eines Attributs eines Elements

js, um den Popup-Effekt zu erzielen

Div kann Inhalte eingeben, ohne die Eingabe als Eingabefeld zu verwenden, um den automatischen Eingabestil zu blockieren

So implementieren Sie die Komprimierung von Webseiten im Nginx-Optimierungsdienst

js implementiert ein einfaches Englisch-Chinesisch-Wörterbuch

JavaScript implementiert Tab-Leisten-Umschalteffekte

JavaScript-Grundlagen: Fehlererfassungsmechanismus

Ein praktischer Bericht über XSS-Angriffe in einem VUE-Projekt

Detaillierte Erklärung der Bildlaufleisten-Bildlaufsteuerung von DOM-Elementen in HTML

So installieren Sie die grüne Version von MySQL Community Server 5.7.16 und implementieren die Remote-Anmeldung

Über den Unterschied zwischen der Überprüfung von Elementen und der Anzeige des Quellcodes einer Webseite

Versuch der Bereitstellung von Docker-Containern – Kommunikation mit mehreren Containern (Node+MongoDB+Nginx)

Nexus verwendet Nginx-Proxy zur Unterstützung des HTTPS-Protokolls

Verwenden von Docker zum Erstellen statischer Website-Anwendungen (mehrere Möglichkeiten)

HTML-Basis-URL-Tag