Как мне переключить мою таблицу стилей CSS с помощью jQuery? - PullRequest
Новая
       28

Как мне переключить мою таблицу стилей CSS с помощью jQuery?

43 голосов
/ 21 октября 2011

То, над чем я работаю, просто.

Вы нажимаете кнопку (id="themes"), и она открывает div (id="themedrop"), который скользит вниз и перечисляет темы.(У меня только два на данный момент) 

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

Теперь, когда сайт загружен, он загружается с style1.css (основная / оригинальная тема) 

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

Теперь япытаться выяснить это ... Как я могу получить, чтобы при нажатии кнопки оттенков серого, чтобы изменить таблицу стилей с style1.css на style2.css (примечание: файлы находятся в одном каталоге)

Любая помощьбудет высоко ценится.

Ответы [ 4 ]

63 голосов
/ 21 октября 2011 
$('#grayscale').click(function (){
   $('link[href="style1.css"]').attr('href','style2.css');
});
$('#original').click(function (){
   $('link[href="style2.css"]').attr('href','style1.css');
});

Попробуйте, но не уверен, что это сработает. Я не проверял, но, боже, удачи.

26 голосов
/ 21 октября 2011

Я бы посоветовал вам дать тегу link идентификатор, такой как тема. Поместите имя файла css в атрибут data на кнопках и используйте для них одинаковый обработчик:

Html: 

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

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

И JS: 

$("button[data-theme]").click(function() {
    $("head link#theme").attr("href", $(this).data("theme"));
}
8 голосов
/ 21 ноября 2012

быстрый способ сделать это, 

<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 />
3 голосов
/ 17 сентября 2014

Используйте это: 

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