Anwenden und Entfernen einer großen CSS-Stil-Abschnitt

Question

Ich möchte den Seitenstil basierend auf Benutzereinstellungen ändern.

Die Seite wird mit einem bestimmten Stil geladen. Wenn der Benutzer jedoch auf eine Schaltfläche klickt, sollte sich das Seitenlayout ändern. Wenn er erneut klickt, sollte der Stil wieder auf den ursprünglichen Stil wechseln. Die Änderungen sind groß (etwa 70 CSS-Zeilen), aber ändern nur einen spezifischen Teil der Seite.

Ich kann eine JavaScript-Funktion schreiben, die die CSS-Stile für alle relevanten Tags ändert, aber das wäre mühsam und würde zu viel CSS in meinen Code einführen. Ich würde es lieber in der CSS-Datei behalten, wenn ich kann.

Ich kann auch Styling hinzufügen A auf die CSS-Datei, mit Bezug auf die Klasse A in allen relevanten Tags und fügen Sie Stil B auf die CSS-Datei, mit Bezug auf die Klasse B in allen relevanten Tags. Dann müsste der JavaScript-Code nur die Klasse der relevanten Tags ändern.

Was ist der beste Weg, um dies zu nähern?

Answer 1

Um dies zu erreichen Sie die Klasse auf den body wechseln könnten (oder ein relevantes geordnete Objekt) und dann ändern Sie Ihre CSS auf dieser Klasse basieren. Auf diese Weise wird die gesamte Benutzeroberfläche nur von 1 Zeile JS-Code beeinflusst. Zum Beispiel:

$('#foo').click(function() { 
    $('body').toggleClass('foobar'); 
}); 

.example { 
    background-color: red; 
} 

body.foobar .example { 
    background-color: blue; 
} 

Answer 2

Sie können auch etwas wie das überprüfen. Und nach dem Klick können Sie Link zu einer anderen CSS-Dateien hinzufügen/löschen.

var ss = document.createElement("link") 
ss.type = "text/css" 
ss.rel = "stylesheet" 
ss.href = "style.css" 
document.getElementsByTagName("head")[0].appendChild(ss); 

Answer 3

Sie können etwas tun, kein Skript, nur CSS, und sehr einfach zu implementieren und auch sehr einfach mehr als ein Layout haben zwischen hin- und herzuschalten.

.toggle { 
 
    display: inline-block; 
 
    padding: 3px 10px; 
 
    border: 1px solid; 
 
    background: #eee; 
 
    margin-bottom: 20px; 
 
} 
 
#toggle, #toggle2 { 
 
    display: none; 
 
} 
 

 
#toggle:checked ~ label[for=toggle], 
 
#toggle2:checked ~ label[for=toggle2] { 
 
    background: #aaa; 
 
} 
 

 
#toggle:checked ~ .container { 
 
    display: none; 
 
} 
 

 
#toggle2:checked ~ .container img:last-child { 
 
    display: none; 
 
}

<input id="toggle" type="checkbox"> 
 
<label for="toggle" class="toggle"> 
 
    Toggle 
 
</label> 
 
<input id="toggle2" type="checkbox"> 
 
<label for="toggle2" class="toggle"> 
 
    Toggle 2 
 
</label> 
 

 
<div class="container"> 
 
    
 
    <img src="http://placehold.it/200x200" alt=""> 
 
    <img src="http://placehold.it/200x200" alt=""> 
 
    <img src="http://placehold.it/200x200" alt=""> 
 

 
</div>