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

Lösung für das Problem, dass Nacos keine Verbindung zu MySQL herstellen kann

Detaillierter Code des Beispiels zum Herunterladen des Docker-Installationspakets von yum und zur Installation auf einem Offline-Computer

1. Verwenden Sie auf einem vernetzten Computer di...

HTML-Elemente durch Anzeige oder Sichtbarkeit verbergen

Lösung für das Problem, dass Nacos keine Verbindung zu MySQL herstellen kann

Verständnis und Anwendungsszenarien von Enumerationstypen in TypeScript

Implementierung der CSS3-Button-Randanimation

Problem beim Ändern der Tabellengröße mithilfe relativer Breiten

Detaillierte Schritte zur Installation von JDK und Tomcat in einer Linux-Umgebung

Grundlegendes zur CSS-Eigenschaft „transform-origin“

So verwenden Sie JSX zum Implementieren von Karussellkomponenten (Front-End-Komponentenbildung)

MySQL verwendet Binlog-Protokolle zur Implementierung der Datenwiederherstellung

js implementiert das klassische Minesweeper-Spiel

Vue3 (V) Details zur Integration der HTTP-Bibliothek axios

Artikel empfehlen

Detaillierte Erklärung des MySQL-Überwachungstools mysql-monitor

So lösen Sie das Problem der Groß-/Kleinschreibung bei MySQL-Abfragen

So verwenden Sie das Name-Attribut und das ID-Attribut des A-Tags, um innerhalb der Seite zu springen

Vue implementiert rekursiv ein dreistufiges Menü

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.14

Detaillierter Code des Beispiels zum Herunterladen des Docker-Installationspakets von yum und zur Installation auf einem Offline-Computer

Was ist ein MySQL-Index? Fragen Sie, wenn Sie es nicht verstehen

Ein möglicher Fehler, wenn MySQL die Summenfunktion auf der Fensterfunktion ausführt

Warum MySQL Repeatable Read als Standardisolationsebene wählt

Ein Beispiel für die Verwendung von nginx zum Konfigurieren mehrerer Laravel-Projekte mit einem Domänennamen

JS Leicht verständliche Funktion und Konstruktor

So stellen Sie eine einzelne Datenbank oder Tabelle in MySQL wieder her und mögliche Fallstricke

Vue implementiert Beispielcode, um die Funktion zum Speichern von Passwörtern im Browser zu deaktivieren

Eine kurze Diskussion über verschiedene Möglichkeiten zur Implementierung einer Front-End-JS-Sandbox

Erklären Sie den Unterschied zwischen Iframe und Frame in HTML anhand von Beispielen