it-swarm.com.de

CSS-Datei schnell ersetzen (und den neuen Stil auf die Seite anwenden)

Ich habe eine Seite mit <link> im Header, die das CSS mit dem Namen light.css lädt. Ich habe auch eine Datei namens dark.css. Ich möchte, dass eine Schaltfläche den Stil der Seite alle austauscht (in css-Datei werden 40 Selektoren verwendet und einige passen nicht in zwei Dateien).

Wie kann ich mit JS den Verweis auf light.css entfernen und alle angewendeten Stile entfernen, dann dark.css laden und alle Stile daraus übernehmen? Ich kann nicht einfach alle Elemente zurücksetzen, da einige Stile durch verschiedene CSS-Dateien angewendet werden und andere dynamisch von JS generiert werden. Gibt es eine einfache, aber effektive Möglichkeit, dies zu tun, ohne die Seite neu zu laden? Vanilla JS ist vorzuziehen, ich werde jedoch jQuery für die spätere Verarbeitung verwenden, so dass auch jQ in Ordnung ist.

48
Xeos

Sie können einen neuen Link erstellen und den alten durch den neuen ersetzen. Wenn Sie es in eine Funktion einfügen, können Sie es dort wieder verwenden, wo es benötigt wird.

Das Javascript:

function changeCSS(cssFile, cssLinkIndex) {

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}

Das HTML:

<html>
    <head>
        <title>Changing CSS</title>
        <link rel="stylesheet" type="text/css" href="positive.css"/>
    </head>
    <body>
        <a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a> 
        <a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
    </body>
</html>

Zur Vereinfachung habe ich Inline-Javascript verwendet. In der Produktion möchten Sie unauffällige Ereignis-Listener verwenden.

50
Matthew Johnson

Sie können alle Stylesheets in das Dokument aufnehmen und diese bei Bedarf aktivieren/deaktivieren.

Beim Lesen der Spezifikation sollten Sie ein alternatives Stylesheet aktivieren können, indem Sie die disabled-Eigenschaft von true in false ändern. Dies scheint jedoch nur Firefox zu tun.

Ich denke, Sie haben ein paar Möglichkeiten:

rel=alternate umschalten

<link rel="stylesheet"           href="main.css">
<link rel="stylesheet alternate" href="light.css" id="light" title="Light">
<link rel="stylesheet alternate" href="dark.css"  id="dark"  title="Dark">

<script>
function enableStylesheet (node) {
  node.rel = 'stylesheet';
}

function disableStylesheet (node) {
  node.rel = 'alternate stylesheet';
}
</script>

disabled setzen und umschalten

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" id="light" class="alternate">
<link rel="stylesheet" href="dark.css"  id="dark"  class="alternate">

<script>
function enableStylesheet (node) {
  node.disabled = false;
}

function disableStylesheet (node) {
  node.disabled = true;
}

document
  .querySelectorAll('link[rel=stylesheet].alternate')
  .forEach(disableStylesheet);
</script>

media=none umschalten

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" media="none" id="light">
<link rel="stylesheet" href="dark.css"  media="none" id="dark">

<script>
function enableStylesheet (node) {
  node.media = '';
}

function disableStylesheet (node) {
  node.media = 'none';
}
</script>

Sie können einen Stylesheet-Knoten mit getElementById , querySelector usw. auswählen.

(Vermeiden Sie den nicht standardmäßigen <link disabled>. Die Einstellung HTMLLinkElement # disabled ist jedoch in Ordnung.)

64
sam

Mit Jquery können Sie die CSS-Datei definitiv austauschen. Tun Sie dies beim Klicken auf die Schaltfläche.

var cssLink = $('link[href*="light.css"]');
cssLink.replaceWith('<link href="dark.css" type="text/css" rel="stylesheet">');

Oder als Sam's Antwort , das funktioniert auch. Hier ist die Jquery-Syntax.

$('link[href*="light.css"]').prop('disabled', true);
$('link[href*="dark.css"]').prop('disabled', false);
7
Krishna

Wenn Sie im Link-Element eine ID festlegen

<link rel="stylesheet" id="stylesheet" href="stylesheet1.css"/>

sie können es mit Javascript anvisieren

document.getElementsByTagName('head')[0].getElementById('stylesheet').href='stylesheet2.css';

oder nur..

document.getElementById('stylesheet').href='stylesheet2.css';

Hier ist ein gründlicheres Beispiel:

<head>
    <script>
    function setStyleSheet(url){
       var stylesheet = document.getElementById("stylesheet");
       stylesheet.setAttribute('href', url);
    }
    </script>

    <link id="stylesheet" rel="stylesheet" type="text/css" href="stylesheet1.css"/>
</head>
<body>
    <a onclick="setStyleSheet('stylesheet1.css')" href="#">Style 1</a>
    <a onclick="setStyleSheet('stylesheet2.css')" href="#">Style 2</a>
</body>
6
davidcondrey

Diese Frage ist ziemlich alt, aber ich würde einen Ansatz vorschlagen, der hier nicht erwähnt wird, bei dem Sie beide CSS-Dateien in den HTML-Code aufnehmen, der CSS-Code jedoch ähnlich ist

light.css

/*** light.css ***/

p.main{
   color: #222;
}

/*** other light CSS ***/

und dark.css wird wie sein

/*** dark.css ***/

.dark_layout p.main{
   color: #fff;
   background-color: #222;
}

/*** other dark CSS ***/

grundsätzlich ist jeder Selektor in dark.css ein Kind von .dark_layout.

Alles, was Sie tun müssen, ist, die Klasse des Körperelements zu ändern, wenn jemand das Design der Website ändern möchte.

$("#changetheme").click(function(){
   $("body").toggleClass("dark_layout");
});

Und jetzt haben alle Ihre Elemente die dunkle CSS, wenn der Benutzer auf #changetheme klickt. Dies ist sehr einfach, wenn Sie CSS-Präprozessoren verwenden.

Sie können auch CSS-Animationen für Hintergründe und Farben hinzufügen, wodurch der Übergang sehr glatt gestaltet wird.

5
void

Mit jquery .attr () können Sie href Ihres link-Tags .i.e festlegen 

Beispielcode

$("#yourButtonId").on('click',function(){
   $("link").attr(href,yourCssUrl);
});
4
Satinder singh

Vielleicht denke ich zu kompliziert, aber da die akzeptierte Antwort für mich nicht funktionierte, dachte ich, ich würde meine Lösung ebenfalls teilen.

Geschichte:
.__ Ich wollte verschiedene "Skins" meiner Seite als zusätzliche Stylesheets, die zum "Main" -Stil hinzugefügt wurden, in den Kopf einfügen und sie durch Drücken einer Schaltfläche auf der Seite wechseln (keine Browsereinstellungen oder ähnliches). .

Problem:
Ich dachte, @ Sam's Lösung war sehr elegant, aber für mich funktionierte das überhaupt nicht. Zumindest ein Teil des Problems ist, dass ich eine Haupt-CSS-Datei verwende und einfach andere als "Skins" hinzufüge. Daher musste ich die Dateien mit der missing 'title' property gruppieren.

Hier ist was ich mir ausgedacht habe.
Füge zuerst alle 'Skins' mit 'alternate' zum Kopf hinzu:

<link rel="stylesheet" href="css/main.css" title='main'>
<link rel="stylesheet alternate" href="css/skin1.css" class='style-skin' title=''>
<link rel="stylesheet alternate" href="css/skin2.css" class='style-skin' title=''>
<link rel="stylesheet alternate" href="css/skin3.css" class='style-skin' title=''>

Beachten Sie, dass ich der CSS-Hauptdatei den Titel = 'main' gegeben habe und alle anderen haben eine Klasse = 'style-skin' und keinen Titel.

Zum Wechseln der Skins verwende ich jQuery. Ich überlasse es den Puristen, eine elegante VanillaJS-Version zu finden:

var activeSkin = 0;    
$('#myButton').on('click', function(){
    var skins = $('.style-skin');
    if (activeSkin > skins.length) activeSkin=0;
    skins.each(function(index){
        if (index === activeSkin){
            $(this).prop('title', 'main');
            $(this).prop('disabled', false);
        }else{
            $(this).prop('title', '');
            $(this).prop('disabled', true);
        }
    });
    activeSkin++
});

Was es macht, iteriert über alle verfügbaren Skins, nimmt die (bald) aktive, setzt den Titel auf "main" und aktiviert ihn. Alle anderen Skins sind deaktiviert und der Titel wird entfernt.

0
Flow