Блог

Главная - Вопросы по программированию - Как мне переключить таблицу стилей CSS с помощью jQuery?

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

#jquery #css #themes #stylesheet

#jquery #css #темы #таблица стилей

Вопрос:

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

Вы нажимаете на кнопку (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 (примечание: файлы находятся в том же каталоге)

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

Ответ №1:

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

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

Комментарии:

1. Спасибо, это помогло мне (модифицированная версия): — $(«кнопка#оттенки серого»).click(function() { $(«link[rel=stylesheet]»).attr({href: «style2.css»}); });

2. да, вы правы, attr('href') лол, извините, кстати, вам не нужна кнопка перед селектором, за которой следует селектор идентификаторов, поскольку идентификаторы должны быть уникальными в соответствии со спецификациями, и у вас не должно быть повторяющихся идентификаторов, поэтому мы используем классы 🙂

3. Хороший ответ. Если иметь дело только с 2 вариантами. Не будет работать для 3 таблиц стилей.

4. @jay вы всегда можете преобразовать идентификаторы в классы, но я хотел сохранить это относительно заданного вопроса 🙂 но я согласен с вами 🙂

5. Это здорово, за исключением того, как перезагрузить страницу с новой таблицей стилей? Я делаю это и с помощью LESS. Я не получаю ошибок, но и не перезагружаюсь.

Ответ №2:

Я бы посоветовал вам присвоить link тегу -tag идентификатор, такой как theme . Поместите имя файла 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"));
}

Ответ №3:

Вы можете попытаться сделать это таким образом:

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

Ответ №4:

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

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

Ответ №5:

По умолчанию на моей веб-странице была темная тема. Чтобы преобразовать ее в тему light, я использовал шрифт sun icon от Google. Таким образом, простым способом код для переключения между темами в jquery был:

 $('.theme').click(function() {
  if ($('.theme').children('img').attr('src') == 'images/lighttheme.png') {
    **$('link').attr('href', 'css/styleslight.css');**
    $('.theme').children('img').attr('src', 'images/darktheme.png')
  } else if ($('.theme').children('img').attr('src') == 'images/darktheme.png') {
    **$('link').attr('href', 'css/stylesdark.css');**
    $('.theme').children('img').attr('src', 'images/lighttheme.png');
  }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Первая строка оператора if и else if является полным ответом. Оставшийся текст включает в себя просто изменение значка при нажатии с луны на солнце или наоборот.

Метки: