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
Artikel empfehlen
So verweisen Sie direkt auf Vue und Element-UI in HTML
Der Code sieht folgendermaßen aus: <!DOCTYPE h...
Detaillierte Erklärung zum Ändern des Standardstils der externen Komponente Vant basierend auf der Vue-CLI-Entwicklung
Inhaltsverzeichnis Vorwort 1. Weniger 2. Importie...
Front-End-KI-Schnitttipps (Erfahrung)
Das AI-Bildschneiden muss mit PS koordiniert werd...
Beispielcode zum automatischen Umbrechen des Pre-Tags
Das Pre-Element definiert vorformatierten Text. In...
Reines CSS zum Implementieren der Funktion zum Öffnen und Schließen von Auswahlfeldern im iOS-Stil
1 Wirkung Demo-Adresse: https://www.albertyy.com/...
Lösung für das Routing-Hervorhebungsproblem von Vue-Komponenten
Vorwort Früher habe ich den Cache verwendet, um d...
Eine detaillierte Diskussion der Auswertungsstrategien in JavaScript
Inhaltsverzeichnis Eine Kastanie zum Abdecken Par...
So scrollen Sie manuell durch Protokolle im Linux-System
Die Protokollrotation ist eine sehr gängige Funkt...
Zusammenfassung verschiedener Formen der Anwendung von CSS-Stilen in Webseiten
1. Inline-Stil, platziert in <body></body...
Methode und Einführung der Tabellenindexdefinition in MySQL
Überblick Ein Index ist eine vom DBMS basierend a...
Tutorial-Diagramm zur Installation von CentOS 7.3 auf einer virtuellen VMware-Maschine
VMware-Vorbereitung CentOS-Vorbereitung, hier ist...
Verabschieden Sie sich vom Hard-Coding und lassen Sie Ihre Front-End-Tabelle den Instanzcode automatisch berechnen
Vorwort Als mein Team das Steuersystemmodul entwi...
Teilen Sie 6 Einladungscodes zur unbegrenzten Aktivierung von Alibaba Cloud Disk. Wenn Sie mir nicht glauben, können Sie Alibaba Cloud Disk aktivieren.
Das letzte Update von Alibaba Cloud Disk ist scho...
So beheben Sie den PyCurl-Fehler unter Linux
Lösung für „Curl-config konnte nicht ausgeführt w...
SQL-basierte Abfrageanweisungen
Inhaltsverzeichnis 1. Einfache SELECT-Anweisung 1...