Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #31 (permalink)  
Старый 11.05.2022, 13:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

vitalso78,
и такой вариант
строка 8 href оставить пустым
строка 9 ставить сразу после link

строка 16 в любое место.

строка 39 убрать class switch-on

<!DOCTYPE html>
<html>

<head>
    <title>css localStorage</title>
    <meta charset="UTF-8" />
    <base href="https://delivery.foodsonic.ru/" />
    <link rel="stylesheet" href="" id="theme-css-file" />
    <script>
    let CssFilePath = localStorage.getItem("CssFilePath")||"https://delivery.foodsonic.ru/light.css";
    const styleElement = document.querySelector("#theme-css-file");
    styleElement.href = CssFilePath;
    </script>


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const styleElement = document.querySelector("#theme-css-file");
            const button = document.querySelector("#SuperButton");
            let CssFilePath = localStorage.getItem("CssFilePath");
            if (CssFilePath) {
                if (CssFilePath.indexOf("dark.css") !== -1) button.classList.add("switch-on");
                else button.classList.remove("switch-on");
             
            }
            button.addEventListener("click", function() {
                let href = "https://delivery.foodsonic.ru/light.css";
                button.classList.toggle("switch-on");
                if (button.classList.contains("switch-on")) href = "https://delivery.foodsonic.ru/dark.css";
                styleElement.href = href;
                localStorage.setItem("CssFilePath", href);
            })
        });
    </script>
</head>

<body>
    <div>Switch theme:</div>
    <div class="switch-btn" id="SuperButton" name="SuperButton">SuperButton</div>
</body>

</html>

Последний раз редактировалось рони, 11.05.2022 в 13:24.
Ответить с цитированием
  #32 (permalink)  
Старый 11.05.2022, 13:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

обновить и скопировать )))
Ответить с цитированием
  #33 (permalink)  
Старый 11.05.2022, 13:25
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,795

рони, а зачем div'у в 39-й строке атрибут name?
Ответить с цитированием
  #34 (permalink)  
Старый 11.05.2022, 13:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Сообщение от Nexus
зачем div'у в 39-й строке атрибут name?
))) видимо при рождении div был input-ом, можно убрать, если нет подвязок css на этот селектор.
Ответить с цитированием
  #35 (permalink)  
Старый 11.05.2022, 16:44
Аспирант
Отправить личное сообщение для vitalso78 Посмотреть профиль Найти все сообщения от vitalso78
 
Регистрация: 10.05.2022
Сообщений: 31

Вообщем вот что у меня получилось https://delivery.foodsonic.ru/, благодаря вам конечно

Последний раз редактировалось vitalso78, 11.05.2022 в 16:47.
Ответить с цитированием
  #36 (permalink)  
Старый 11.05.2022, 17:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

vitalso78,
смотрите #31, "лишняя" подгрузка стилей в начале, должна исчезнуть.
Ответить с цитированием
  #37 (permalink)  
Старый 11.05.2022, 17:38
Аспирант
Отправить личное сообщение для vitalso78 Посмотреть профиль Найти все сообщения от vitalso78
 
Регистрация: 10.05.2022
Сообщений: 31

Сообщение от рони Посмотреть сообщение
vitalso78,
смотрите #31, "лишняя" подгрузка стилей в начале, должна исчезнуть.
Чот я не найду. что именно удалить ?
Ответить с цитированием
  #38 (permalink)  
Старый 11.05.2022, 17:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

vitalso78,
строка 43
<link rel="stylesheet" href="/light.css" id="theme-css-file" /> выделенное удалить
должно стать так
<link rel="stylesheet" href="" id="theme-css-file" />
<script>
    let CssFilePath = localStorage.getItem("CssFilePath")||"/light.css";
    const styleElement = document.querySelector("#theme-css-file");
    styleElement.href = CssFilePath;
    </script>


 </head>
Ответить с цитированием
  #39 (permalink)  
Старый 11.05.2022, 17:47
Аспирант
Отправить личное сообщение для vitalso78 Посмотреть профиль Найти все сообщения от vitalso78
 
Регистрация: 10.05.2022
Сообщений: 31

Ага, спасибо
Ответить с цитированием
  #40 (permalink)  
Старый 12.05.2022, 10:32
Аспирант
Отправить личное сообщение для vitalso78 Посмотреть профиль Найти все сообщения от vitalso78
 
Регистрация: 10.05.2022
Сообщений: 31

Забыл вчера рассказать. Так как сайт на Битриксе,- изложил проблему у них на форуме. С начала неделю ждал, тишина, вообще никого. Потом всё таки кто то ответил. Изложил такую инструкцию,- охиреешь. Что бы сделать вот такой переключатель , надо обернуться вокруг себя три раза, свистнуть 28 раз, подпрыгнуть 234 раза, и стучать в бубен пока не заработает код. Даже пример не привели. Геморой страшный. У вас же сделал за 30 минут.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
переименовать название стилей в SVG перед вставкой в другой SVG Герасим Events/DOM/Window 9 09.06.2018 09:16
Замена тегов Kost-iv Events/DOM/Window 4 01.11.2015 17:12
Шаблон сброса стандартных стилей Olegich (X)HTML/CSS 14 13.09.2013 18:47
Динамическое применение стилей к элементу и их отмена Amphiluke Events/DOM/Window 10 26.11.2012 22:33
Изменение путей к таблицам стилей и скриптам в скрипете галереи lightbox 2.04 Flashton Элементы интерфейса 1 01.02.2010 10:10