CashmereCat
@CashmereCat
Новичок

Как добавить/удалить link в head? И возможно ли это вообще?

Доброго времени суток!
Нужно при нажатии на элемент(условно говоря, кнопку) изменить цветовую схему страницы. В голову пришло лишь добраться до head и там уже добавить в конец:

<link rel="stylesheet" href="путь до файла со стилями">

Каким образом это можно сделать с помощью jQuery?
Или есть другие способы реализации задумки, а я уверен, что они есть, буду премного благодарен, если о них поведают.
Заранее спасибо!
  • Вопрос задан
  • 4822 просмотра
Решения вопроса 1
По мне так, лучшим вариантом будет оставить один link, а далее менять его href атрибут.
Примерно, так:
$('#blackstyle').click(function (){
    $('link[href="style1.css"]').attr('href', 'style2.css');
});
$('#original').click(function (){
    $('link[href="style2.css"]').attr('href', 'style1.css');
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Finesse
@Finesse
// Добавление link
$link = $('<link/>', {
  rel: 'stylesheet',
  href: 'путь...'
}).appendTo('head');

// Немного позже удаление ранее созданного link
$link.remove();


Но лучше так не делать, потому что изменение стилей произойдёт с заметной задержкой, вызванной тем, что новый файл стилей нужно сначала загрузить и обработать. Лучше всего изменять класс тега body, а новое оформление задавать в том же файле стилей, но добавив к селекторам body.новыйКласс:

<html>
  <head>
    <script src="js/jquery.js"></script>
    <style>
      .content { color: black; } /* Обычное оформление */
      body.otherStyle .content { color: red; } /* Новое оформление */
    </style>
  </head>
  <body>
    <div class="content">Lorem ipsum</div>
    <button id="button">Поменять всё</button>
    <script>
      $('#button').click(function(event) {
        // Нажатие кнопки будет добавлять класс, если его нет, и удалять его, если есть, тем самым включая/выключая другое оформление
        $('body').toggleClass('otherStyle');
        event.preventDefault();
      });
    </script>
  </body>
</html>
Ответ написан
Creamov
@Creamov
Full-stack Web Developer
Вот вариант подключения/отключения файла стилей без jQuery. Работать будет гораздо быстрее чем вариант с jQuery, поскольку это чистый JavaScript.

// Подключает
function addStyleSheets (href) {
    var $head = document.head,
        $link = document.createElement('link');

    $link.rel = 'stylesheet';
    $link.href = href;

    $head.appendChild($link);
}

// Отключает по ссылке
function disableStyleSheets (href) {
    var styles = document.styleSheets;
    for (i in styles) {
        if (styles[i].href == href) {
            styles[i].disabled = true;
        }
    }
}

// Примеры
addStyleSheets('путь/до/файла/со/стилями.css');     // Подключаем
disableStyleSheets('путь/до/файла/со/стилями.css'); // Отключаем

В вашем случае, для изменения цветовой схемы страницы, лучше использовать особые классы. При клике на какую-нибудь кнопку добавлять соответствующий класс элементу body. Ниже привожу пример добавления класса к body используя чистый JavaScript.

// Вариант для IE10+
var $body = document.querySelector('body');
$body.classList.toggle('red-theme'); // удалит/добавит класс .red-theme для <body>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы