Ich versuche, einen Live-In-Page-CSS-Editor mit einer Vorschaufunktion zu erstellen, mit der das Stylesheet neu geladen und angewendet werden kann, ohne dass die Seite neu geladen werden muss. Was wäre der beste Weg, dies zu tun?
javascript
css
stylesheet
reload
Stephen Belanger
quelle
quelle
Antworten:
<link>
Schreiben Sie auf der Seite "Bearbeiten", anstatt Ihr CSS wie gewohnt (mit einem Tag) einzuschließen, alles in ein<style>
Tag. Durch Bearbeiten derinnerHTML
Eigenschaft wird die Seite automatisch aktualisiert, auch ohne einen Roundtrip zum Server.Das Javascript mit jQuery:
Und das sollte es sein!
Wenn Sie wirklich ausgefallen sein möchten, hängen Sie die Funktion an den Keydown im Textbereich an, obwohl Sie möglicherweise unerwünschte Nebenwirkungen haben (die Seite ändert sich während der Eingabe ständig).
Bearbeiten : getestet und funktioniert (zumindest in Firefox 3.5, sollte aber mit anderen Browsern in Ordnung sein). Siehe Demo hier: http://jsbin.com/owapi
quelle
innerHTML
für<style>
Elemente (und<script>
).Möglicherweise nicht zutreffend für Ihre Situation, aber hier ist die jQuery-Funktion, die ich zum Neuladen externer Stylesheets verwende:
quelle
var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length;i++) { var link = links[i]; if (link.rel === "stylesheet") {link.href += "?"; }}
Es ist absolut nicht erforderlich, jQuery dafür zu verwenden. Die folgende JavaScript-Funktion lädt alle Ihre CSS-Dateien neu:
quelle
Schauen Sie sich Andrew Daveys schickes Vogue-Projekt an - http://aboutcode.net/vogue/
quelle
Eine kürzere Version in Vanilla JS und in einer Zeile:
Oder erweitert:
quelle
Noch eine jQuery-Lösung
Versuchen Sie für ein einzelnes Stylesheet mit der ID "css" Folgendes:
Schließen Sie es in eine Funktion mit globalem Umfang ein, und Sie können es über die Entwicklerkonsole in Chrome oder Firebug in Firefox verwenden:
quelle
Basierend auf früheren Lösungen habe ich ein Lesezeichen mit JavaScript-Code erstellt:
Bild von Firefox:
Was tut es?
CSS wird neu geladen, indem Abfragezeichenfolgenparameter hinzugefügt werden (wie oben beschrieben):
quelle
Ja, laden Sie das CSS-Tag neu. Denken Sie auch daran, die neue URL eindeutig zu machen (normalerweise durch Anhängen eines zufälligen Abfrageparameters). Ich habe Code, um dies zu tun, aber momentan nicht bei mir. Wird später bearbeitet ...
edit: zu spät ... harto und nickf haben mich geschlagen ;-)
quelle
Ich habe jetzt das:
Erstellen Sie ein Element auf Ihrer Seite mit der ID changeCss mit einem href-Attribut mit der neuen CSS-URL. und ein Linkelement mit dem Start-CSS:
quelle
Eine andere Antwort: Es gibt ein Lesezeichen namens ReCSS . Ich habe es nicht ausgiebig benutzt, scheint aber zu funktionieren.
Auf dieser Seite befindet sich ein Lesezeichen, das Sie per Drag & Drop in Ihre Adressleiste ziehen können (hier kann anscheinend kein Lesezeichen erstellt werden). Falls das kaputt ist, hier ist der Code:
quelle
einfach, wenn Sie PHP verwenden Fügen Sie einfach die aktuelle Zeit am Ende des CSS wie
Jedes Mal, wenn Sie neu laden, was auch immer es ist, ändert sich die Zeit und der Browser denkt, dass es sich um eine andere Datei handelt, da sich das letzte Bit ständig ändert. Sie können dies für jede Datei tun und den Browser zwingen, immer mit der gewünschten Skriptsprache zu aktualisieren
quelle
Auf einfache Weise können Sie rel = "Preload" anstelle von rel = "Stylesheet" verwenden .
quelle
rel="reload"
aber das Beispiel sagtrel="preload"
.Da diese Frage 2019 im Stackoverflow angezeigt wurde, möchte ich meinen Beitrag mit einem moderneren JavaScript hinzufügen.
Speziell für CSS-Stylesheets, die nicht inline sind - da dies irgendwie bereits von der ursprünglichen Frage abgedeckt ist.
Beachten Sie zunächst, dass wir immer noch keine konstruierbaren Stylesheet-Objekte haben. Wir hoffen jedoch, dass sie bald gelandet sind.
In der Zwischenzeit wird folgender HTML-Inhalt angenommen:
Wir könnten haben in
index.js
:quelle