Appliquer et supprimer une grande section de style CSS

Question

Je voudrais changer le style de page en fonction des préférences de l'utilisateur.

La page sera chargée avec un style donné, mais si l'utilisateur clique sur un bouton, la mise en page doit changer. S'il clique à nouveau, le style doit revenir au style d'origine. Les changements sont importants (environ 70 lignes CSS), mais seulement changer une spécifique partie de la page.

Je peux écrire une fonction JavaScript qui modifie les styles CSS pour toutes les balises pertinentes, mais cela serait fastidieux et introduirait trop de CSS dans mon code. Je préfère le garder dans le fichier CSS si je peux.

Je peux aussi ajouter un style A au fichier CSS, en référence à la classe A dans toutes les balises pertinentes et ajouter du style B au fichier CSS, en référence à la classe B dans toutes les balises pertinentes. Ensuite, le code JavaScript aurait juste à changer la classe sur les balises pertinentes.

Quelle est la meilleure façon d'aborder cela?

Answer 1

Pour ce faire, vous pouvez basculer la classe sur la body (ou un objet parent plus pertinent), puis modifier votre CSS pour être basé sur cette classe. De cette façon, toute l'interface utilisateur est affectée par seulement 1 ligne de code JS. Par exemple:

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

.example { 
    background-color: red; 
} 

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

Answer 2

Vous pouvez également vérifier quelque chose comme ceci.Et après cliquez sur vous pouvez ajouter/supprimer un lien vers un autre fichier CSS.

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

Answer 3

Vous pouvez faire quelque chose comme ça, pas de script, juste CSS, et très facile à mettre en œuvre et très facile d'avoir plus d'une mise en page pour basculer entre les deux.

.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>