Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   JS или Jquery смена стиля HTML по клику на кнопку с сохранением (https://javascript.ru/forum/dom-window/78637-js-ili-jquery-smena-stilya-html-po-kliku-na-knopku-s-sokhraneniem.html)

qusaze 12.10.2019 22:10

JS или Jquery смена стиля HTML по клику на кнопку с сохранением
 
Имеется кнопка:
<a class="block" href="#">Тема</a>

На неё по клику надо сделать добавление стиля к HTML
document.documentElement.classList.add("night");

При еще одном клике, стиль удаляется и переходит в исходное состояние. К этому привязать локальное сохранение стиля. Кто поможет? Спасибо

рони 12.10.2019 22:25

qusaze,
https://javascript.ru/forum/misc/727...tml#post479258

qusaze 13.10.2019 00:05

let html = document.querySelector('html');
 
window.addEventListener('unload',() => {
    localStorage.setItem('night', html.classList.contains('night') ? 1 : 0);
});
 
if (localStorage.getItem('night') == 1) {
    html.classList.add("night");
}
 
document.querySelector('.block').addEventListener('click',function() {
    html.classList.toggle("night");
});


Вот решение. Спасибо

рони 13.10.2019 00:18

qusaze,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .night {
       background-color: #000000;
       color: #FFFFFF;
   }

  </style>


</head>

<body>
<p>test</p>
<input name="" type="button" value="click me" class="block">
<script>
let html = document.querySelector('html');
if (localStorage.getItem('night') == 'true') {
    html.classList.add("night");
}

document.querySelector('.block').addEventListener('click',function() {
    html.classList.toggle("night");
    localStorage.setItem('night', html.classList.contains('night'));
});

  </script>
</body>
</html>


Часовой пояс GMT +3, время: 08:10.