Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.10.2019, 22:10
Новичок на форуме
Отправить личное сообщение для qusaze Посмотреть профиль Найти все сообщения от qusaze
 
Регистрация: 12.10.2019
Сообщений: 2

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

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

При еще одном клике, стиль удаляется и переходит в исходное состояние. К этому привязать локальное сохранение стиля. Кто поможет? Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 12.10.2019, 22:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

qusaze,
https://javascript.ru/forum/misc/727...tml#post479258
Ответить с цитированием
  #3 (permalink)  
Старый 13.10.2019, 00:05
Новичок на форуме
Отправить личное сообщение для qusaze Посмотреть профиль Найти все сообщения от qusaze
 
Регистрация: 12.10.2019
Сообщений: 2

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается вставить код js в HTML garmoni Элементы интерфейса 3 05.09.2013 05:56
Ищу jquery, js, html, css спеца. AlexBell Работа 41 23.11.2012 08:20
редактор html или bb кодов на jquery gaserge Общие вопросы Javascript 15 28.08.2011 01:39
Найти проблему с jQuery или писать js? Saladdin Элементы интерфейса 0 17.03.2011 17:02
Вакансия: Front-end разработчик (HTML, CSS, JS, Ajax, jQuery) ivankov Работа 0 05.10.2010 19:00