mediol-name
@mediol-name
Developer

Как исправить ошибку в подмене стилей на сайте?

Добрый день!

Есть задача сделать две темы оформления сайта - день/ночь. Я написал второй файл стилей для темной темы и решил подключать его к странице с помощью Java Script. Логика в том, чтобы при клике на переключатель, внутри тега head дописывался новый link с нужным файлом стилей.

HEAD сайта:
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="img/fav.png" type="image/png">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css"> //После этой строки нужно добавить еще одну с другим файлом стилей
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/blobs.css">
    <title>Ideo - интернет-маркетинг и разработка сайтов</title>
</head>


Переключатель:
<div class="switch">
    <input type="checkbox" id="changeTheme" class="hoverable" onclick="darkTheme()">
</div>


Скрипт:
function darkTheme()
    {
        var checkbox = document.getElementById('changeTheme'),
            newLink = document.createElement('link'),
            head = document.getElementById('head');
        if(checkbox.checked){
            newLink.rel = "stylesheet";
            newLink.href = "css/dark.css";
            newLink.id = "link";
            head.insertBefore(newLink, head.children[7]);
        }else{
            link.remove(newLink);
        }
    }


Вот так подключил скрипт в конце страницы:
5e7baffa88566458816846.png

В результате этих всех действий я получил ошибку в консоли (см. скриншот) и смена стилей не произошла
5e7bae083a06c834985983.png

В Java Script я не силен. Подскажите, где накосячил и как исправить?
  • Вопрос задан
  • 98 просмотров
Пригласить эксперта
Ответы на вопрос 2
sniggering_deus
@sniggering_deus
Mother is a god in the eyes of a child.
Вот простой вариант смены темной и светлой темы, без лишних файлов и прочего:




Кстати, усложню вопрос еще тем, что при смене темы оформления, необходимо сменить несколько изображений для достижения полного эффекта.


В переменные заносим ссылки на изображения. В разных темах, разные изображения:



==================================================================
==================================================================
==================================================================

Ладно, вот ещё вариант. Смена тем оформления с разными файлами:

Это кнопки для смены тем:

<span onclick="chooseDesign(1); return false;">СВЕТЛАЯ ТЕМА</span>
 <span onclick="chooseDesign(2); return false;">ТЁМНАЯ ТЕМА</span>
 <span onclick="chooseDesign(3); return false;">ЛИМОННАЯ ТЕМА</span>
 <span onclick="chooseDesign(4); return false;">БУМАЖНАЯ ТЕМА</span>
 <span onclick="chooseDesign(5); return false;">ХОЛОДНАЯ ТЕМА</span>


Это скрипт:

const mainElement = document.getElementById('mainElement');

if (!localStorage.getItem('mystyles') || !['1','2','3','4','5'].includes(localStorage.getItem('mystyles')) ) {
localStorage.setItem('mystyles', '1');
mainElement.setAttribute('href', 'personal-theme/main-theme-1.css'); 
} else {
mainElement.setAttribute('href', 'personal-theme/main-theme-' + localStorage.getItem('mystyles') + '.css');
}

function chooseDesign(theme) {
if (theme == 1) {
mainElement.setAttribute('href', 'personal-theme/main-theme-1.css');
localStorage.removeItem('mystyles');
} else {
mainElement.setAttribute('href', 'personal-theme/main-theme-' + theme + '.css');
localStorage.setItem('mystyles', theme);
};
};


['1','2','3','4','5'] - вот тут укажите от одного до энного количества стилей - число. Точнее например у вас 5 разных стилей на выбор, укажите 5 или если их 20, укажите 20 в таком же порядке как и в исходном коде.

Все стили/темы складываем в одну папку, например: personal-theme.

Имена стилей ОБЯЗАТЕЛЬНО должны заканчиваться на цифру, причём, цифры должны идти по порядку. Например: main-theme-1.css, main-theme-2.css, main-theme-3.css, main-theme-4.css, main-theme-5.css

Стили для каждой темы, пишите и вносите в нужные файлы, т.е в main-theme-(номер-темы).css
Ответ написан
mediol-name
@mediol-name Автор вопроса
Developer
Кстати, усложню вопрос еще тем, что при смене темы оформления, необходимо сменить несколько изображений для достижения полного эффекта.
Ответ написан
Ваш ответ на вопрос

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

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