Форум

qusaze · #1 (**permalink**) 12.10.2019, 22:10

Имеется кнопка:

<a class="block" href="#">Тема</a>

На неё по клику надо сделать добавление стиля к HTML

document.documentElement.classList.add("night");

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

рони · #2 (**permalink**) 12.10.2019, 22:25

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

qusaze · #3 (**permalink**) 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");
});

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

рони · #4 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript