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

Zusammenfassung der Konfigurationsprobleme von Nginx-Standort und Proxy-Pass-Pfad

Grafisches Tutorial zur Konfigurationsmethode für die Installationsversion von MySQL5.7.17 winx64 unter Windows Server 2008 R2

Installieren Sie mysql5.7 unter Win. Zu Ihrer Inf...

Detaillierte Erklärung, wie Sie verhindern können, dass Inhalte auf HTML-Seiten ausgewählt, kopiert oder mit der rechten Maustaste angeklickt werden.

Manchmal möchten wir nicht, dass der Inhalt unser...

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

Zusammenfassung der Konfigurationsprobleme von Nginx-Standort und Proxy-Pass-Pfad

Detaillierte Erklärung einiger Einstellungen für Tabellenanpassung und Überlauf

Zeichnen Sie den gesamten Prozess der MySQL-Master-Slave-Konfiguration basierend auf Linux auf

Holen Sie sich den berechneten Stil im CSS-Element (nach dem kaskadierenden/finalen Stil).

Linux-Schritte zum Konfigurieren der lokalen Yum-Quelle, der inländischen Yum-Quelle und der Epel-Quelle

Detaillierte Erläuterung der Verwaltung und Verwendung von Docker Secrets

So installieren Sie Jenkins auf CentOS 8

Vite führt die Implementierung virtueller Dateien ein

Beheben Sie das Kompatibilitätsproblem zwischen dem MySQL 8.0-Treiber und der Alibaba Druid-Version

Detaillierte Erklärung der Rolle statischer Variablen in MySQL

Artikel empfehlen

So implementieren Sie Sveltes Defer Transition in Vue

Beheben Sie die Fallstricke beim Speichern von Booleschen Werten im lokalen Speicher

Docker-Bereitstellung MySQL8-Cluster (ein Master und zwei Slaves) Implementierungsschritte

Vue implementiert eine Komponente zur dynamischen Abfrageregelgenerierung

12 Arten der Komponentenkommunikation in Vue2

Mysql gibt die Methode zur Datumsbereichsextraktion an

Grafisches Tutorial zur Konfigurationsmethode für die Installationsversion von MySQL5.7.17 winx64 unter Windows Server 2008 R2

Zusammenfassung des Verständnisses des virtuellen DOM in Vue

Schritte zum Verpacken und Freigeben des Vue-Projekts

Linux verwendet lsof/extundelete-Tools, um versehentlich gelöschte Dateien oder Verzeichnisse wiederherzustellen

Player in Webseite einbetten Einbettungselement Autostart falsch ungültig

Detaillierte Erklärung, wie Sie verhindern können, dass Inhalte auf HTML-Seiten ausgewählt, kopiert oder mit der rechten Maustaste angeklickt werden.

Automatisiertes Frontend-Deployment basierend auf Docker, Nginx und Jenkins

So verbinden Sie JDBC mit MySQL 5.7

Vue realisiert den Card-Flip-Effekt