Пробую не чего не получается.
Что бы все сохранялось на последующие заходы на сайт, что бы на весь сайт настройки распространялись.
У меня есть проект но что бы его понять там черт ногу сломит, я воссоздал примерный файл с теми настройками которые нужны.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #fff;
color: #000;
font: 400 1rem/1.25rem sans-serif;
}
.fon_belyi{
background-color: #fff;
color: #000;
}
.fon_chernyi{
background-color: #000;
color: #fff
}
.chrift_osnovnoi{
font-family: sans-serif;
}
.chrift_drygoi{
font-family: serif;
}
.razmer_osnovnoi{
font-size: 1rem;
}
.razmer_15{
font-size: 1.3rem;
line-height: 1.50rem;
}
.razmer_20{
font-size: 1.6rem;
line-height: 1.75rem;
}
.blok {
max-width: 480px;
}
.knopka {
width: 100%;
padding: 5px;
border: 1px solid #8b00ff;
text-align: center;
margin: 10px;
cursor: pointer;
text-decoration: none;
color: #9400d3;
}
.knopka:hover {
width: 100%;
padding: 5px;
border: 1px solid #000;
text-align: center;
margin: 10px;
cursor: pointer;
text-decoration: none;
color: #8b00ff;
}
.vibran{
text-decoration: underline;
color: #8b00ff;
}
</style>
</head>
<body>
<div class="blok">
<div class="knopka knopka1 vibran">Основной фон</div>
<div class="knopka knopka2">Смена фона</div>
<div class="knopka knopka3 vibran">Основной шрифт</div>
<div class="knopka knopka4">Другой шрифт</div>
<div class="knopka knopka5 vibran">Основной размер</div>
<div class="knopka knopka6">Увеличить размер * 1,5</div>
<div class="knopka knopka7">Увеличить размер * 2</div>
<div class="tekst"><br><br>
ОБ ОРГАНИЗАЦИИ<br><br>
Деятельность нашей организации направлена на оказание разного рода помощи малоимущим, социально незащищенным
слоям населения.
<br><br>
На сегодняшний день открыты приюты, предназначенные для инвалидов и престарелых граждан, лиц, ведущих
бродяжнический образ жизни, а так же для людей, оставшихся без средств к существованию и не имеющих крова над
головой.<br>
ЦЕЛЬ ДЕЯТЕЛЬНОСТИ:<br><br>
минимализация бродяжничества в Новосибирске и Новосибирской области
ОСНОВНЫЕ ЗАДАЧИ:<br><br>
социальная и психологическая адаптация граждан через проживание в центре восстановления личности;<br>
восполнение жизненно важных потребностей;<br>
развитие в людях чувства сострадания, взаимовыручки, единства, милосердия, любви к ближним;<br>
восстановление социального статуса, восстановление социальных – трудовых навыков, трудоустройство.<br>
Я знаю, что есть люди, которым нужна помощь,<br>
и мы в силах оказать её.<br><br>
Директор АНО "ТВОЙ ДОМ"<br>
Наталья Петровна Першина
</div>
</div>
<script>
const body = document.querySelector("body");
const knopka1 = document.querySelector(".knopka1");
const knopka2 = document.querySelector(".knopka2");
const knopka3 = document.querySelector(".knopka3");
const knopka4 = document.querySelector(".knopka4");
const knopka5 = document.querySelector(".knopka5");
const knopka6 = document.querySelector(".knopka6");
const knopka7 = document.querySelector(".knopka7");
let fun_knopka1 = () =>{
body.classList.add("fon_belyi");
body.classList.remove("fon_chernyi");
knopka1.classList.add("vibran");
knopka2.classList.remove("vibran");
}
knopka1.addEventListener("click", fun_knopka1);
let fun_knopka2 = () =>{
body.classList.remove("fon_belyi");
body.classList.add("fon_chernyi");
knopka1.classList.remove("vibran");
knopka2.classList.add("vibran");
}
knopka2.addEventListener("click", fun_knopka2);
let fun_knopka3 = () =>{
body.classList.add("chrift_osnovnoi");
body.classList.remove("chrift_drygoi");
knopka3.classList.add("vibran");
knopka4.classList.remove("vibran");
}
knopka3.addEventListener("click", fun_knopka3);
let fun_knopka4 = () =>{
body.classList.remove("chrift_osnovnoi");
body.classList.add("chrift_drygoi");
knopka3.classList.remove("vibran");
knopka4.classList.add("vibran");
}
knopka4.addEventListener("click", fun_knopka4);
let fun_knopka5 = () =>{
body.classList.add("razmer_osnovnoi");
body.classList.remove("razmer_15");
body.classList.remove("razmer_20");
knopka5.classList.add("vibran");
knopka6.classList.remove("vibran");
knopka7.classList.remove("vibran");
}
knopka5.addEventListener("click", fun_knopka5);
let fun_knopka6 = () =>{
body.classList.remove("razmer_osnovnoi");
body.classList.add("razmer_15");
body.classList.remove("razmer_20");
knopka5.classList.remove("vibran");
knopka6.classList.add("vibran");
knopka7.classList.remove("vibran");
}
knopka6.addEventListener("click", fun_knopka6);
let fun_knopka7 = () =>{
body.classList.remove("razmer_osnovnoi");
body.classList.remove("razmer_15");
body.classList.add("razmer_20");
knopka5.classList.remove("vibran");
knopka6.classList.remove("vibran");
knopka7.classList.add("vibran");
}
knopka7.addEventListener("click", fun_knopka7);
</script>
</body>
</html>