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

Beispiel für die Verwendung von Javascript zum Ziehen und Tauschen von Div-Positionen

HTML-Elemente durch Anzeige oder Sichtbarkeit verbergen

Beispiel für die Verwendung von Javascript zum Ziehen und Tauschen von Div-Positionen

JS generiert eindeutige ID-Methoden: UUID und NanoID

Detailliertes Tutorial zur Installation von OpenStack Ussuri in CentOS8 mit minimaler Bereitstellung

JavaScript imitiert die Spezialeffekte der Jingdong-Lupe

JavaScript implementiert die zufällige Generierung von Bestätigungscode und Bestätigung

Entwicklung einer Vue Element-Frontend-Anwendung zum Abrufen von Backend-Daten

Lösung für das Problem, dass die virtuelle Maschine Ubuntu 16.04 keine Verbindung zum Internet herstellen kann

Verwenden Sie Nicht-Root-Benutzer, um Skriptvorgänge in Docker-Containern auszuführen

MySQL count: ausführliche Erklärung und Funktionsbeispielcode

Vergleich zweier Implementierungsmethoden der Vue-Dropdown-Liste

Artikel empfehlen

Einige Hinweise zur MySQL-Self-Join-Deduplizierung

js implementiert das Umschalten von Bildern per Maus (ohne Timer)

Super einfache Implementierung von Docker zum Erstellen eines persönlichen Blogsystems

Beispiele für MySQL-Batch-Hinzufügungs- und Speichermethoden

Detaillierte Erläuterung des Implementierungsbeispiels für die Gruppenrangfolge im MySQL-Tutorial

Probleme mit der NodeJS-, Koa- und Typescript-Integration und dem automatischen Neustart

Detaillierte Erklärung der Vuex-Umgebung

Möglicherweise benötigen Sie einen digitalen Großbild-Scrolling-Effekt wie diesen

Vue implementiert 3 Möglichkeiten zum Wechseln zwischen Registerkarten und zum Beibehalten des Datenstatus

Benutzerdefinierte Menünavigation im WeChat-Applet zum Erzielen eines Treppeneffekts

Details zur React Routing Link-Konfiguration

Detaillierte Erläuterung der 6 Möglichkeiten der JS-Vererbung

Tutorial zur Installation und Konfiguration der entpackten Version von MySql unter Windows 10

So erstellen Sie einen Flammeneffekt mit CSS

Anzeige der Tabellenliste für die Front-End-Anwendungsentwicklung von Vue Element