web-dev-qa-db-fra.com

Comment changer de feuille de style CSS avec jQuery?

Ce sur quoi je travaille est simple.

Vous cliquez sur un bouton (id="themes") et il ouvre une div (id="themedrop") qui glisse vers le bas et répertorie les thèmes. (Je n'en ai que deux à ce stade)

<button id="original">Original</button><br />
<button id="grayscale">Grayscale</button>

Maintenant, lorsque le site est chargé, il se charge avec style1.css (thème principal/original)

<link rel="stylesheet" type="text/css" href="style1.css">

Maintenant, ce que j'essaie de comprendre, c'est ... Comment puis-je l'avoir quand on clique sur le bouton en niveaux de gris pour changer la feuille de style de style1.css en style2.css (remarque: les fichiers sont dans le même répertoire)

Toute aide serait très appréciée.

jquerycssthemesstylesheet
43
Michael Schwartz
$('#grayscale').click(function (){
   $('link[href="style1.css"]').attr('href','style2.css');
});
$('#original').click(function (){
   $('link[href="style2.css"]').attr('href','style1.css');
});

Essayez ceci mais ne savez pas si cela fonctionnera, je ne l'ai pas testé, mais Gd chance.

63
Val

Je vous suggère de donner à la balise link- un identifiant tel que thème. Mettez le nom du fichier css dans un attribut data- sur les boutons et utilisez le même gestionnaire sur les deux:

Html:

<link id="theme" rel="stylesheet" href="style1.css">

<button id="grayscale" data-theme="style2.css">Gray Theme</button>

Et js:

$("button[data-theme]").click(function() {
    $("head link#theme").attr("href", $(this).data("theme"));
}
26
Tetaxa

moyen rapide de le faire est,

<link id="original" rel="stylesheet" type="text/css" href="style1.css">
<script>
function turnGrey(){
document.getElementById("original").href="grey.css";<!-- what ever your new css file is called-->
}
</script>
<button id="grey" onclick="turnGrey">Turn Grey</button><br />
8
none

Utilisez ceci :

<link href="Custom.css" rel="stylesheet" />
<link href="Blue.css" rel="stylesheet" />
<link href="Red.css" rel="stylesheet" />
<link href="Yellow.css" rel="stylesheet" />



<select id="changeCss"`enter code here`>
        <option onclick="selectCss(this)" value="Blue">Blue</option>
        <option onclick="selectCss(this)" value="Red">Red</option>
        <option onclick="selectCss(this)" value="Yellow">Yellow</option>
    </select>

<script type="text/javacript">
function selectCss() {
            var link = $("link[rel=stylesheet]")[0].href;
            var css = link.substring(link.lastIndexOf('/') + 1, link.length)
            $('link[href="' + css + '"]').attr('href', $('#changeCss').val() + '.css');
        }
</script>
3
user4045479