Javascript-форум - Помогите разобраться с логикой.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Помогите разобраться с логикой. (https://javascript.ru/forum/misc/80976-pomogite-razobratsya-s-logikojj.html)

Помогите разобраться с логикой.

Мне нужно сделать скрипт который бы отвечал за изменение оформление.
Проще говоря это версия сайта для слабовидящих.

Там будет изменятся фон и шрифт. То есть три разных фона может быть, например белый с черным шрифтом, черный с белым шрифтом зеленый с желтым шрифтом, разные размеры шрифта, гарнитура шрифта с засечками и без, и все это может быть в разных сочетаний. Ну я думаю основанная мысль понятна.

Как написать такой скрипт у меня нету сложности, но я не знаю как сделать лучше. А именно мне что нужно менять при клике на нужные кнопки, сам файл стилей? или в файле стилей менять параметры?
Как сохранять то есть что бы для этого пользовался они применились ко всему сайту а не только к этой странице и что бы они на будущее конкретно для него сохранились.

Объясните по простому логику как нужно его написать.

Цитата:

Сообщение от Сергей Ракипов

Объясните по простому логику как нужно его написать.

согласно сохранённому индексу, грузится нужный файл css или присваивается нужный класс - всё

localStorage смена css

Сергей Ракипов,
вариант со сменой класса ...

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
html.bg1 body{background-color: hsla(0, 100%, 60%, 1)}
html.bg2 body{background-color: hsla(150, 50%, 40%, 1)}
html.bg3 body{background-color: hsla(252, 100%, 50%, 1)}
</style>
<script>
   (function() {
    var html = document.querySelector('html')
    var x = localStorage.x || 1;
    html.classList.add(`bg${x}`);
    })()
</script>
</head>
<body>
<div class="bg-image "></div>
<select class="bg" size="1" onchange="6">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
document.querySelector('.bg').value = localStorage.x || 1;
document.querySelector('.bg').addEventListener("change", function() {
localStorage.x = this.value;
window.location.reload()
})
  });
</script>
</body>
</html>

Наверное тогда проще не массу стилей перечислять, да еще в файлах смесь хранить, а файлов стилей вряд ли один будет, а для такой категории включить свои файлы стилей.

Пробую не чего не получается.
Что бы все сохранялось на последующие заходы на сайт, что бы на весь сайт настройки распространялись.
У меня есть проект но что бы его понять там черт ногу сломит, я воссоздал примерный файл с теми настройками которые нужны.

<!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>

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

laimas,
я не знаю как правильно сделать

Прямо в head вставьте скрипт, который будет считывать значения из localstorage и подключать нужные таблицы стилей (созданием элемента link и добавлением его в head.

Цитата:

Сообщение от Сергей Ракипов

я не знаю как

В Widows смотрели Центр специальных возможностей, думаете это мелкософт все сам придумал?

Трудно представить, чтобы плохо видящий ковырялся в плохо им читаемом списке "Основной фон, Основной размер, Увеличить размер * 1,5, ..." в котором даже поленились написать "на" и вставили звездочку. Вы себе представляете мытарства пользователя? Слабовидящему нужна кнопка, которую он легко сможет видеть в интерфейсе, и подсказка к этой кнопке уже должна иметь шрифт более крупный. Нажал он на кнопку и все, тема для слабовидящего будет подключена. И тема базируется не на представлениях кодера, который в этом ничего не понимает, а на рекомендациях специалистов, в первую очередь это медиков.

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

Правильно так, все остальное типа в каждом файле для каждого случая и хранения в локальном хранилище, это, мягко выражаясь, через попу.

Сергей Ракипов,

<!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>