Постоянный ночной режим Toggle - PullRequest
Новая
       36

Постоянный ночной режим Toggle

0 голосов
/ 13 июня 2018 

function swapstylesheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet)
}
<!--style.css-->

body{
	background-color:#ffffff;
}

li{
  color:#000000;
}
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<li type="button" onclick="swapstylesheet('stylenight.css')">Night Mode</li>

<li type="button" onclick="swapstylesheet('style.css')">Day Mode</li>
</body>

Я пытаюсь реализовать кнопку на моем HTML-сайте, которая переключает CSS для текущего веб-сайта и всех других страниц на моем сайте, используяJavaScript.Проблема в том, что когда я переключаюсь на другой файл CSS и затем переключаю страницу, он возвращается к исходному файлу CSS (имейте в виду, что я новичок в JavaScript).Если это поможет, это переключит дневной / ночной режим. 

<!--stylenight.css-->

body{
	background-color:#000000;
}

li{
  color:#ffffff;
}

1 Ответ

0 голосов
/ 13 июня 2018

Вам нужно будет установить куки в браузере, когда пользователь нажимает кнопку дневного / ночного режима.и прочитайте значение файла cookie, чтобы установить режим, когда пользователь вернется на исходную страницу.

Подробнее о настройке и чтении файлов cookie можно прочитать в javascript здесь: https://www.w3schools.com/Js/js_cookies.asp

Вы ищетечто-то вроде этого при нажатии на кнопку:

document.cookie = "mode=Day;";

Также вам понадобится функция для чтения файлов cookie при загрузке страницы:

(с Каквызывать функцию JavaScript при загрузке страницы? ) 

window.onload = function() {
   readCookieAndSetMode();
};

И на readCookieAndSetMode() вы должны прочитать cookie, используя

var x = document.cookie;

ив зависимости от x поменяйте местами CSS (я оставляю вам эту часть).

...