Сергей Ракипов,
<!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;
}
.knopka.vibran{
text-decoration: underline;
color: #000000;
background-color: hsla(40, 100%, 70%, 1)}
</style>
</head>
<body>
<script>
const dataCss = {
background : ["fon_belyi","fon_chernyi"],
font : ["chrift_osnovnoi","chrift_drygoi"],
size : ["razmer_osnovnoi","razmer_15","razmer_20"]
};
const body = document.querySelector("body");
let conserved = localStorage.dataCss ? JSON.parse(localStorage.dataCss): {
background : 0,
font : 0,
size : 0
};
body.addEventListener( "click" , ({target}) => {
if(target = target.closest("[data-css]")) {
const key = target.dataset.css;
const index = [...document.querySelectorAll(`[data-css="${key}"]`)].indexOf(target)
conserved[key] = index;
localStorage.dataCss = JSON.stringify(conserved)
setClassName();
setActive();
}
});
const setClassName = () => {
for( let [key, index] of Object.entries(conserved)) {
dataCss[key].forEach((name, i) => body.classList[i == index ? "add" : "remove"](name))
}};
const setActive = () => {
for( let [key, index] of Object.entries(conserved)) {
[...document.querySelectorAll(`[data-css="${key}"]`)].forEach((el, i) => el.classList[i == index ? "add" : "remove"]("vibran"))
}};
setClassName();
</script>
<div class="blok">
<div class="knopka" data-css="background">Основной фон</div>
<div class="knopka" data-css="background">Смена фона</div>
<div class="knopka" data-css="font">Основной шрифт</div>
<div class="knopka" data-css="font">Другой шрифт</div>
<div class="knopka" data-css="size">Основной размер</div>
<div class="knopka" data-css="size">Увеличить размер * 1,5</div>
<div class="knopka" data-css="size">Увеличить размер * 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>
setActive();
</script>
</body>
</html>