JS или Jquery смена стиля HTML по клику на кнопку с сохранением
Имеется кнопка:
<a class="block" href="#">Тема</a> На неё по клику надо сделать добавление стиля к HTML
document.documentElement.classList.add("night");
При еще одном клике, стиль удаляется и переходит в исходное состояние. К этому привязать локальное сохранение стиля. Кто поможет? Спасибо |
|
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");
});
Вот решение. Спасибо |
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, время: 22:17. |