Ein- und Ausblenden von HTML-Elementen durch Anzeige oder Sichtbarkeit

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>

<<: Vue implementiert Baumtabelle durch Elementbaumsteuerung

>>: Lösung für die durch die obere feste Navigationsleiste blockierte CSS-Ankerpositionierung

Von CSS 3D zur räumlichen Koordinatenachse mit Quellcode

Ein- und Ausblenden von HTML-Elementen durch Anzeige oder Sichtbarkeit

Von CSS 3D zur räumlichen Koordinatenachse mit Quellcode

CSS+HTML zur Implementierung des Platzhalter-Animationseffekts beim Laden des Skeleton-Bildschirms (mit Animation)

Detaillierte Erklärung zur Verwendung von Scoped Slots in Vue.js-Slots

CSS-Pixel und Lösungen für verschiedene Probleme bei der Anpassung mobiler Bildschirme

Detaillierte Erläuterung des Linux-Befehls zur Änderung des Hostnamens

Verwenden Sie das ab-Tool, um einen API-Stresstest auf dem Server durchzuführen

Hostübergreifende Kommunikation zwischen Docker-Containern - Overlay-basierte Implementierungsmethode

Detaillierte Erklärung des Ref-Attributs von Vue

Zusammenfassung der benutzerdefinierten JavaScript-Objektmethoden

So stellen Sie Oracle mit Docker auf dem Mac bereit

Artikel empfehlen

Detaillierte Einführung in Robots.txt

Natives JS zur Implementierung der Paging-Klicksteuerung

Detaillierte Erklärung zum manuellen Hochladen von Excel-Dateien auf den Server mit Vue ElementUI

Anweisungen zur Verwendung des Datenbankverbindungspools Druid

50 Codezeilen zur Implementierung von Nutzungsstatistiken für Webpack-Komponenten

Lösung für das Verschwinden des MySql-Dienstes aus unbekannten Gründen

Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten

Die Implementierung der Ereignisbindung in React verweist auf drei Methoden

JavaScript, um den Effekt des Tab-Leistenwechsels zu erzielen

Lösen Sie das Problem ungültiger UTF8-Einstellungen in MySQL 5.6

Gruselige Halloween-Linux-Befehle

So verwenden Sie Standardwerte für Variablen in SASS

Das WeChat-Applet realisiert die Chatroom-Funktion

Das WeChat-Applet realisiert einen mehrzeiligen Text-Scroll-Effekt

Detailliertes Tutorial zur Installation von MySQL 5.7 auf RedHat 6.5