HTML-, CSS- und JS-Kompatibilitätsbaum (IE, Firefox, Chrome)
|
Was ist ein Baum im Webdesign? Einfach ausgedrückt: Wenn Sie auf einen Link klicken, wird das Unterverzeichnis erweitert, und wenn Sie erneut klicken, wird es geschlossen. Dies ist der einfachste Baum. Die Implementierung ist ebenfalls sehr einfach. In CSS gibt es eine Eigenschaftsanzeige, mit der gesteuert werden kann, ob der Inhalt angezeigt wird oder nicht. Anschließend können Sie JS verwenden, um die Eigenschaften von CSS zu steuern und dies zu erreichen. Siehe den folgenden Code: <div>Verzeichnis der obersten Ebene</div> <div id="Menüliste"> <div>Menü 1</div> <div>Menü 2</div> <div>Menü 3</div> </div> Dies ist der Prototyp des Baums. Natürlich fügt der Anfangszustand das CSS-Anzeigeattribut hinzu. Die am häufigsten verwendeten Anzeigeattribute sind „none“ und „block“. None bedeutet keine Anzeige, während Block wie ein Blocktypelement angezeigt wird. Schauen wir uns den Code an <div>Verzeichnis der obersten Ebene</div> <div id="Menüliste" style="Anzeige:keine"> <div>Menü 1</div> <div>Menü 2</div> <div>Menü 3</div> </div> Auf diese Weise wird beim Ausführen der Seite nur das Verzeichnis der obersten Ebene angezeigt. Wenn Sie es steuern möchten, müssen Sie js-Code hinzufügen 1. Holen Sie sich zuerst die Menüliste var Menüliste = document.getElementById("Menüliste"); 2. Oder das Objekt kann seine CSS-Eigenschaften steuern menulist.style.display="Block"; Urteil hinzufügen wenn (menulist.style.display="keine") menulist.style.display="Block"; anders Menüliste.style.display="keine"; Auf diese Weise wird der primitivste Baum erzeugt und der endgültige Code <Skript> Funktion showmenu() { var Menüliste = document.getElementById("Menüliste"); wenn (menulist.style.display=="keine") menulist.style.display="Block"; anders Menüliste.style.display="keine"; } </Skript> <div auf click="showmenu();">Top-Verzeichnis</div> <div id="Menüliste" style="Anzeige:keine"> <div>Menü 1</div> <div>Menü 2</div> <div>Menü 3</div> </div> Lange Zeit habe ich diese Methode verwendet, um Eigenschaftsverzeichnisse zu erstellen. Egal, wie komplex das Verzeichnis war, diese Methode hat jedes Mal funktioniert. Der folgende Screenshot zeigt den laufenden Effekt eines komplexeren Baumverzeichnisses, das ich unter IE erstellt habe:   Etwas Schreckliches ist passiert. In Chrome sah alles durcheinander aus. Nach einiger Informationssuche habe ich endlich den Grund gefunden. Neben Block und None hat Display viele andere Attribute. Block wird in Blöcken angezeigt und ich habe Tabellen für das Layout verwendet. Gott weiß, ob Tabellen und Blöcke einen tiefen Hass haben. Microsoft hält es für klug, seinen Hass zu ignorieren, während Chrome sich immer noch ehrlich an die Standards hält, und das gilt auch für Firefox. Es gibt also immer noch ein Problem in ihrer Erklärung. So lösen Sie dieses Problem: Display verfügt außerdem über eine Eigenschaft namens table-cell, die den Inhalt in Form einer Tabelle darstellt. Genau das möchte ich tun, wenn ich eine Tabelle für das Layout verwende. Im Folgenden sind die kompatiblen Darstellungen von drei Browsern aufgeführt:  IE6  Chrom2  Firefox 3.5 |
>>: Beispiel zum Ändern von Stilen über CSS-Variablen
Artikel empfehlen
Detaillierte Schritte zum Ändern gespeicherter MySQL-Prozeduren
Vorwort Bei der tatsächlichen Entwicklung werden ...
Grundlegende Syntax und Funktionsweise der MySQL-Datenbank
Grundlegende Syntax der MySQL-Datenbank DDL-Opera...
Detaillierte Erklärung zur Begrenzung des Update-/Löschbereichs mit dem MySQL-Parameter sql_safe_updates
Vorwort Wie Sie alle wissen, sind wir bei MySQL-B...
Verwendung von Linux-Netzwerkkonfigurationstools
Dieser Artikel stellt RHEL8-Netzwerkdienste und N...
Detaillierte Erklärung der Verwendung von 5 verschiedenen Werten der CSS-Position
Die Position-Eigenschaft Die Positionseigenschaft...
Verwenden von react-virtualized zum Implementieren einer langen Liste von Bildern mit dynamischer Höhe
Inhaltsverzeichnis Während der Entwicklung aufget...
Code zum Anzeigen des Inhalts eines TXT-Buchs auf einer Webseite
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
Schritte der Docker-Lernmethode zum Erstellen des ActiveMQ-Nachrichtendienstes
Vorwort ActiveMQ ist der beliebteste und leistung...
CSS-Tipps zur Steuerung der Wiedergabe und Pause von Animationen (sehr praktisch)
Heute stelle ich einen sehr einfachen Trick vor, ...
Fehler MySQL-Tabelle 'performance_schema...Lösung
Die Testumgebung ist mit MariaDB 5.7 eingerichtet...
So fügen Sie ein Lua-Modul zu Nginx hinzu
Lua installieren wget http://luajit.org/download/...
HTML (CSS-Stilspezifikation) muss lauten
CSS-Stilspezifikationen 1. Klassenauswahl 2. Tag-...
So veröffentlichen Sie statische Ressourcen in Nginx
Schritt Platzieren Sie die vorbereiteten statisch...
So installieren Sie JDK und Mysql auf dem Linux-System Ubuntu 18.04
Plattformbereitstellung 1. JDK installieren Schri...
Beispielcode zur Implementierung des Aushöhlungseffekts mit CSS
Wirkungsprinzip Verwenden Sie hauptsächlich CSS-F...