|
|
11.05.2022, 10:46
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
смена темы оформления страницы с запоминанием выбора
vitalso78,
<!DOCTYPE html>
<html>
<head>
<title>css localStorage</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="dark.css" id="theme-css-file" />
<script>
document.addEventListener("DOMContentLoaded", function() {
const styleElement = document.querySelector("#theme-css-file");
const buttons = document.querySelectorAll("[data-set-theme-file]");
let CssFilePath = localStorage.getItem("CssFilePath");
if (CssFilePath) styleElement.href = CssFilePath;
buttons.forEach(function(button) {
let href = button.dataset.setThemeFile;
button.addEventListener("click", function() {
styleElement.href = href;
localStorage.setItem("CssFilePath", href);
})
})
});
</script>
</head>
<body>
<div>Switch theme:</div>
<button type="button" data-set-theme-file="light.css">Light</button>
<button type="button" data-set-theme-file="dark.css">Dark</button>
</body>
</html>
|
|
11.05.2022, 11:03
|
|
Аспирант
|
|
Регистрация: 10.05.2022
Сообщений: 31
|
|
Вот в этот код как воткнуть сохранение ?
window.onload = function() {
document.getElementById('SuperButton').onclick = function()
{
if(document.body.className != 'new_class')
{
document.body.className = 'new_class';
}
else
{
document.body.className = '';
}
}
}
|
|
11.05.2022, 11:53
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от vitalso78
|
|
Вот в этот код как воткнуть сохранение ?
|
зачем? грузите ваши css, как показано выше #11, и не мучайтесь с body. |
|
11.05.2022, 11:57
|
|
Аспирант
|
|
Регистрация: 10.05.2022
Сообщений: 31
|
|
|
заменв стилей
Сообщение от рони
|
|
зачем? грузите ваши css, как показано выше #11, и не мучайтесь с body.
|
У меняя не работает ваша конструкция, не полностью подгружает стили. Можно сказать, что вообще не подгружает. Если не трудно, помогите мне в мой код воткнуть сохранение. |
|
11.05.2022, 12:09
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от vitalso78
|
|
Вообще работает не поймёш как
|
прекрасно работает, что не так? |
|
11.05.2022, 12:12
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
счас перекинем с кнопок, на ваш div
|
|
11.05.2022, 12:20
|
|
Аспирант
|
|
Регистрация: 10.05.2022
Сообщений: 31
|
|
|
Фиг знает, у меня не пашет. Один раз переключаеш, потом всё, триндец, не работают кнопки
|
|
11.05.2022, 12:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
vitalso78,
верните id!!! id="SuperButton" и замрите)))
|
|
11.05.2022, 12:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
vitalso78,
<!DOCTYPE html>
<html>
<head>
<title>css localStorage</title>
<meta charset="UTF-8" />
<base href="https://delivery.foodsonic.ru/" />
<link rel="stylesheet" href="https://delivery.foodsonic.ru/dark.css" id="theme-css-file" />
<script>
document.addEventListener("DOMContentLoaded", function() {
const styleElement = document.querySelector("#theme-css-file");
const button = document.querySelector("#SuperButton");
let CssFilePath = localStorage.getItem("CssFilePath");
if (CssFilePath) styleElement.href = CssFilePath;
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 switch-on" id="SuperButton" name="SuperButton">click me SuperButton</div>
</body>
</html>
|
|
|
|
