mediol-name
@mediol-name
Wordpress Developer

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

Есть задача сделать две темы оформления сайта - день/ночь. Я написал второй файл стилей для темной темы и решил подключать его к странице с помощью JavaScript. Логика в том, чтобы при клике на переключатель, внутри тега 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

Как это исправить?
  • Вопрос задан
  • 123 просмотра
Пригласить эксперта
Ответы на вопрос 1
mediol-name
@mediol-name Автор вопроса
Wordpress Developer
Кстати, усложню вопрос еще тем, что при смене темы оформления, необходимо сменить несколько изображений для достижения полного эффекта.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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