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

Analyse mehrerer Gründe, warum Iframe weniger verwendet werden sollte

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

Analyse mehrerer Gründe, warum Iframe weniger verwendet werden sollte

Was ist BFC? So löschen Sie Floats mithilfe von CSS-Pseudoelementen

js Addition, Subtraktion, Multiplikation und Division – Beispielcode für präzise Berechnungsmethoden

Tutorial und Praxis zu den virtuellen Speichereinstellungen unter Linux

Detaillierte Beschreibung von Shallow Copy und Deep Copy in js

Wie erhält das WeChat Mini-Programm gleichzeitig Benutzerinformationen und Benutzertelefonnummern?

Erfahren Sie in zehn Minuten, wie Sie Microservices mit Docker bereitstellen

So verarbeiten Sie Blob-Daten in MySQL

Lösung für die Ineffektivität der flexiblen Layoutbreite in CSS3

Praxis der Bereitstellung von in Python geschriebenen Webanwendungen mit Docker

Artikel empfehlen

Kurze Analyse der verschiedenen Versionen des mysql.data.dll-Treibers

Detaillierte Schritte zur Installation der XML-Erweiterung in PHP unter Linux

So richten Sie den Ziellink eines Tags auf ein Iframe

Detaillierte Erklärung inkompatibler Änderungen von Komponenten in vue3

Detailliertes Tutorial zur Installation von JDK8 auf einem Linux-System (CentOS7-Installation)

Analyse eines MySQL-Deadlock-Szenariobeispiels

Erklärung des Konzepts und der Verwendung von Like in MySQL

Detaillierte Verwendung des Docker-Maven-Plugins

Zusammenfassung der Installation der grünen Version von MySQL5 unter Windows (empfohlen)

Eine kurze Einführung in die Verwendung des Dezimaltyps in MySQL

MySQL-Optimierung: So schreiben Sie hochwertige SQL-Anweisungen

Ein unvollständiger Leitfaden zur JavaScript-Toolchain

So definieren Sie Datenbeispiele in Vue

Schritte zum Konfigurieren von IIS10 unter Win10 und zum Unterstützen des Debuggens von ASP-Programmen

Verwenden Sie CSS-Mischmodi und SVG, um die Farbe Ihrer Produktbilder dynamisch zu ändern