Ich versuche einen Weg zu finden Stylesheets basierend auf der Jahreszeit mit jquery zu ändern, da zu diesem Zeitpunkt noch nicht bekannt ist, ob ich PHP oder Ruby überhaupt auf dieser Seite verwenden kann . Danke für deine Antworten!Stylesheet basierend auf Monat/Saison in jQuery ändern
Antwort
Ich würde vorschlagen, dass Sie die Elemente eingrenzen, die Sie auf der Seite ändern möchten, da die CSS-Datei bereits geladen wäre und jQuery nur die CSS anwenden würde, nachdem die statische CSS geladen wurde. Sie könnten diese spezifischen Stildeklarationen aus dem CSS herauslassen oder sie als Standard beibehalten. Wenn sich beispielsweise das Hintergrundbild ändert, können Sie es in der Standard-css-Deklaration auf Weiß setzen. Auf diese Weise sieht es beim Laden normal aus und Sie verwenden nur JavaScript, um die erforderlichen Elemente zu laden.
Sie könnten dann die JavaScript-Monats-Funktion verwenden, um den aktuellen Monat
var month = new Date();
month = month.getMonth();
Dann bekommen Sie jQuery verwenden könnten, um diese Stile auf den Kopf mit der jQuery-Ready-Funktion anzuwenden. Sie können einen einfachen Schalter der if/else-Anweisung verwenden, um abhängig von der Monatszahl eine von vier Anweisungen auszuwählen. Zum Beispiel, wenn Sie den Hintergrund
$("head").append("<style type=\"text/css\">body {background-color: #FFF !important;}</style>");
Nur ein kleines Beispiel zu ändern, aber es wäre es effizienter machen als ein ganzes Blatt Laden denke ich.
setzen alle Ihre Erklärungen in einer CSS in Form von
.someStyle{ color:blue;}
.summer .someStyle{color:yellow;}
.winter .someStyle{color:purple;}
...
alle Klassen unter .summer den Standardstil für den Sommer
dann auf dem Server/Client außer Kraft setzen, wenn die Seite fertig ist - fügen Sie diese Klasse zum Körper
das einzige Problem mit tun es auf dem Client ist, dass der Standard-Stil zuerst rendern und dann auf den neuen wechseln (wählen Sie einfach die Saison am häufigsten für die Benutzer Ihrer Website - wenn es Israel wäre ich würde wähle Sommer ;-)
Am einfachsten ist es, Ihre CSS-Stile zu erweitern und eine Klasse auf hoher Ebene hinzuzufügen. Normalerweise mache ich das bei Körper Element. Die CSS wie folgt aussieht:
body.summer ul { background-color: green; }
body.fall ul { background-color: orange; }
body.winter ul { background-color: white; }
body.spring ul { background-color: pink; }
Dann JS verwenden, um die Körper-Klasse festlegen:
...</body>
<script ...>
var season = (new Date()).getMonth...;
$('body').addClass(season);
</script>
</html>
Wie Sie sehen können, habe ich nach dem Schließen des Body-Tag diese sofort platziert. Ich denke, das ist der erste Ort, wo man es hinstellen und es zur Arbeit bringen kann, aber man muss es überprüfen. Der Grund, dies hier zu tun, ist, das Aufblitzen unsterblichen Inhalts zu verhindern - wenn Sie auf der Seite viel los haben, wollen Sie dieses Javascript vor dem bereitstehenden Rückruf ausführen. Davon abgesehen hatte ich eigentlich kein Problem damit, den Großteil meines Codes in den Bereitschaftsrückruf zu stellen.
Sie können auch verschiedene Stylesheets einfach laden - wahrscheinlich am selben Ort. Erstellen Sie einfach einen Stilknoten und fügen Sie ihn als letzten Knoten in den Kopf ein. Sie würden dies tun, wenn Sie große Unterschiede zwischen Ihren Stilen haben. Ziemlich schwierig zu pflegen.
$("head").append("<style type=\"text/css\" src=\"" + season + ".css\"">");
- 1. jQuery Datentabellen ändern Datenzelle basierend auf Klick
- 2. jQuery - Bild basierend auf Klick ändern
- 3. automatische jquery stylesheet switcher
- 4. jQuery entspricht YUI StyleSheet-Dienstprogramm?
- 5. Ändern der URL basierend auf einem anderen Link in jQuery
- 6. Wie Datum in Jquery ändern basierend auf anderem Datum
- 7. Gibt es eine Möglichkeit, das Stylesheet einer Seite basierend auf dem Stylesheet einer anderen Seite zu ändern?
- 8. Laden jquery datepicker stylesheet
- 9. jquery - div basierend auf Auswahl ändern - funktioniert nur auf Geige
- 10. Standard-Stylesheet-Dir in Schienen ändern
- 11. XSLT Stylesheet: Ändern von Text in Großbuchstaben
- 12. basierend auf Auswahl (jQuery)
- 13. Ändern des DOM basierend auf einem AJAX-Ergebnis mit jQuery
- 14. Ändern Körper Font-Größe basierend auf Font-Familie mit jQuery
- 15. Ändern Auswahl Option basierend auf Attribut
- 16. JQuery: Ändern der Höhe basierend auf einem anderen Element
- 17. Ändern Sie Bilder mit jQuery basierend auf JSON-Daten
- 18. jQuery: CSS-Farbe basierend auf Inline-Stil Breite ändern
- 19. jquery - CSS des Elements basierend auf seinem Index ändern
- 20. Ändern Drawbar basierend auf Thema
- 21. Ändern Clusterradius basierend auf Punktzählimpuls
- 22. OutputCache basierend auf URL ändern
- 23. Bild basierend auf Bildlaufposition ändern
- 24. offen Warenkorb 2.2 ändern style.css basierend auf Sprache oder Richtung
- 25. Stylesheet im Code hinter der Masterpage ändern
- 26. Stylesheet verzögert auf firefox
- 27. jQuery wählen basierend auf Text
- 28. jQuery Filterelemente basierend auf Datenattribut
- 29. Zeige Formularfeld basierend auf Auswahlwert in jquery
- 30. Mehrere Felder basierend auf Dropdown in jquery
Es wäre wirklich bestes Server-Side-Scripting zu verwenden, um dies zu tun, denn das neue Stylesheet nur * nachdem der gesamte DOM * geladen geladen werden, und bis dahin sollte der Rendering-Prozess bereits begonnen hat, so Das Laden einer großen Anzahl von Änderungen würde diesen Prozess stören und Flash von unbestätigtem Inhalt verursachen. –