Echtzeit-Umschaltung von CSS-Stilen für Webseiten

CSS-Stile in Echtzeit wechseln
Mit W3C-Standards erstellte Websites können theoretisch eine vollständige Trennung von Leistung und Struktur erreichen. Sie können beispielsweise den Skin (Leistung, CSS) vollständig ändern, ohne das Skelett (Struktur, XHMTL) und die Muskeln (Verhalten, Javascript) zu verschieben.

Natürlich müssen Sie vor dem Ändern des Skins Ihre Website gemäß den W3C-Standards erstellen und zwei CSS-Sätze mit unterschiedlicher Leistung dafür vorbereiten. „Ändern des Skins“ bedeutet im Wesentlichen „Ändern des CSS“. Alles, was wir tun müssen, ist, eine Methode zu verwenden, um den Browser dazu zu bringen, einen anderen Satz CSS zu laden und die Seite neu zu rendern. Es gibt viele Methoden und ich werde die drei häufigsten vorstellen.

Methode 1: Nichts tun

Hä? Nichts tun? Nun, das... um genau zu sein: Mach es einfach ein bisschen (glaubst du wirklich, dass es so etwas Gutes gibt...).

Angenommen, wir haben zwei CSS-Sätze, die in zwei verschiedenen Dateien enthalten sind: a.css und b.css. Fügen Sie dann die folgenden zwei Zeilen XHTML-Code zwischen und hinzu:

Öffnen Sie dann diese Seite mit Ihrem Firefox und wählen Sie in der Menüleiste: Ansicht-> , sollten Sie die folgende „Landschaft“ sehen können:

So einfach ist das, jetzt können Sie Firefox verwenden, um es „neu zu gestalten“. IE? IE hat diese Funktion nicht ... MS ist einfach so dumm, dass W3C „ausdrücklich empfiehlt“, dass Browser den Benutzern die Möglichkeit geben müssen, ihre eigenen Stylesheets auszuwählen, aber das tut es nicht. Glücklicherweise ist diese Angelegenheit nicht allzu kompliziert, also lassen Sie es uns für Sie erledigen.

[Trennzeichen]

Methode 2: Javascript

Basierend auf Methode 1 können Sie die DOM-Methode von Javascript verwenden, um auf das Linkobjekt zuzugreifen, und dann das unnötige CSS festlegen auf „deaktiviert“ gesetzt ist, wird das verbleibende CSS vom Browser zum Rendern der Seite verwendet. Das Skript lautet wie folgt, bitte beachten Sie die Kommentare:

Rufen Sie dann diese Funktion an der entsprechenden Stelle auf und fügen Sie am Beispiel dieser Seite die folgenden beiden Schaltflächen hinzu:

Der Vorteil der Verwendung von Javascript besteht darin, dass es bequem, schnell und einfach ist. Der Nachteil liegt auch auf der Hand: Es ist schwierig, das CSS der gesamten Site zu ändern und kann nur auf das Aktuelle beschränkt werden Seite. Um die Wahl des Benutzers zu speichern, ist die Verwendung von Cookies eine praktikable Lösung. Aber selbst wenn Cookies verwendet werden, müssen weitere Artikel zu Themen geschrieben werden, z. B. wann CSS geladen werden muss und was zu tun ist, wenn der Benutzer keine Javascript-Unterstützung hat. Daher ist es besser, die folgende Methode zu verwenden –

Methode 3: Serverseitiges Skript

Es besteht kein Zweifel, dass der beste CSS-Umschalter serverseitiges Skript (PHP, ASP, JSP) verwenden sollte usw.) Entwicklung. Die Vorteile davon liegen auf der Hand: direkt, effizient, gute Kompatibilität, kann sich Benutzerauswahlen merken und kann sogar verschiedene CSS kombinieren, um einen recht komplexen „Skin“-Wechsel zu erreichen.

Ich verwende hier PHP als Beispiel. In anderen Sprachen wird es ähnlich sein, sodass es für normale Entwickler nicht schwierig sein wird.

Die Grundidee ist folgende: Der Benutzer wählt einen „Skin“ aus, die Auswahl des Benutzers wird in einem Cookie aufgezeichnet (dasselbe wird in der Datenbank aufgezeichnet, aber der Systemaufwand ist größer) und der Benutzer besucht Jede Seite auf der Website Zu diesem Zeitpunkt wird die Auswahl des vorherigen Benutzers aus dem Cookie (oder der Datenbank) gelesen und die entsprechende CSS-Datei geladen (nehmen Sie auch hier die in Methode 1 erwähnten a.css und b.css als Beispiel). .

Erstellen Sie eine Datei namens switcher.php mit folgendem Inhalt:

　

Dieses Skript zuerst lesen Fragen Sie die Daten ab, schreiben Sie dann den Wert des Parameterstils in das Cookie und kehren Sie schließlich zur vorherigen Seite zurück. Als Nächstes können wir zwei Links zum Wechseln von Stilen erstellen und diese auf entsprechenden Seiten platzieren, beispielsweise auf der Startseite oder im Benutzerverwaltungs-Backend (beachten Sie, dass site.com durch Ihren Domainnamen ersetzt wird):

Theme A
Theme B　

Klicken Sie auf einen beliebigen Link und „a“ oder „b“ werden entsprechend im Cookie aufgezeichnet. Dann ist ein Skript erforderlich, um den Cookie-Wert zu lesen und XHTML auszugeben, um das entsprechende CSS einzuführen:

="stylesheet" type="text/css"
title="Derzeit ausgewähltes Thema" href=".css" />

Jede Seite, die benötigt wird Um den Stil zu wechseln, muss dieser Code hinzugefügt werden. Fügen Sie ihn also einfach zur Header-Datei der Website hinzu. Natürlich können Sie dieses Skript an Ihre eigenen Bedürfnisse anpassen, aber die Grundidee sollte dieselbe bleiben.

title="Theme A " href="a.css" />
title="Theme B" href="b.css" / >
Das Obige ist der Inhalt der CSS-Stilimplementierung zum Echtzeitwechsel von Webseiten. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!