1. Zuhause
  2. Frage und Antwort
  3. gesamte CSS-Datei ändern auf Refresh

gesamte CSS-Datei ändern auf Refresh

2016-06-28 3 views
3

Alle anderen Fragen, die ich habe zu diesem Ergebnis beziehen, sind über bestimmte Elemente ändern oder mit einer Taste die CSS-Datei ändern, aber was ich bin auf der Suche, um herauszufinden:gesamte CSS-Datei ändern auf Refresh

Ist Gibt es ein Skript, das bei jeder Aktualisierung der Seite eine ganze CSS-Datei austauscht?

I.e. Ich habe meine Kern style.css und zusätzliche {color}.css Dateien, die bestimmte Elemente in style.css ersetzen, und ich möchte, dass diese zusätzlichen CSS-Dateien nach dem Zufallsprinzip auf Refresh geladen werden.

Sorry, ich weiß nicht einmal wo, um damit zu beginnen. Hoffentlich kann jemand einige Hinweise anbieten?

Vielen Dank.

Quelle

2016-06-28 ukijake

Antwort

3

Im Grunde ist dies nur eine Frage der etwas zufällig Kommissionierung, zum Beispiel: (. Einer der seltenen Fälle, in denen document.write nicht wirklich eine schlechte Lösung ist)

<head> 
<!-- ... --> 
<script> 
var sheets = ["sheet1.css", "sheet2.css", "sheet3.css"]; 
var sheet = sheets[Math.floor(Math.random() * sheets.length)]; 
document.write('<link rel="stylesheet" href="' + sheet + '">'); 
</script> 
<noscript> 
<link rel="stylesheet" href="sheet1.css"> 
</noscript> 
<!-- ... -->

Beachten Sie den noscript Rückfall wird die immer verwenden dasselbe Stylesheet in Browsern mit deaktiviertem JavaScript

Quelle

2016-06-28 08:52:29

+1

Nice job einschließlich der '

+0

Perfekt. Vielen Dank! – ukijake

1

Alles, was Sie tun müssen, um eine CSS-Datei mit Javascript zu laden, ist das Hinzufügen eines <link> Elements zum DOM/body und es wird automatisch geladen.

So in Ihrem Abschnitt könnten Sie ein <script> Tag, das nur zufällig eine color.css aus einem Array und generieren Sie die Link-Tag, vorzugsweise so früh wie möglich in der Datei, um Flimmern zu verhindern.

<script> 
    var colors = ['red.css', 'blue.css', 'green.css']; 
    var colors_idx = Math.floor(Math.random()*colors.length); 

    document.write('<link href="'+colors[ colors_idx ]+'" rel="stylesheet" type="text/css" />'); 
</script>

(PS. Es gibt sauberere Wege HTML zu injizieren, ist es prägnant zu halten auf die Lösung zu konzentrieren. Verwenden Sie Ihre bevorzugten Ansatz, document.write ein bisschen launisch sein können.)

Quelle

2016-06-28 09:01:37

Verwandte Themen

 Verwandte Themen