Помогите разобраться с логикой.
Мне нужно сделать скрипт который бы отвечал за изменение оформление.
Проще говоря это версия сайта для слабовидящих. Там будет изменятся фон и шрифт. То есть три разных фона может быть, например белый с черным шрифтом, черный с белым шрифтом зеленый с желтым шрифтом, разные размеры шрифта, гарнитура шрифта с засечками и без, и все это может быть в разных сочетаний. Ну я думаю основанная мысль понятна. Как написать такой скрипт у меня нету сложности, но я не знаю как сделать лучше. А именно мне что нужно менять при клике на нужные кнопки, сам файл стилей? или в файле стилей менять параметры? Как сохранять то есть что бы для этого пользовался они применились ко всему сайту а не только к этой странице и что бы они на будущее конкретно для него сохранились. Объясните по простому логику как нужно его написать. |
Цитата:
|
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.
|
Цитата:
Трудно представить, чтобы плохо видящий ковырялся в плохо им читаемом списке "Основной фон, Основной размер, Увеличить размер * 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>
|
рони,
прищурьте глаза и попробуйте прочесть список. :) Нельзя так делать, это равноценно как построить для колясочника пандус с препятствиями. |
laimas,
сменил расцветочку. |
Цитата:
Кстати, такой цвет как подобран, как раз для слабовидящего, это приговор. |
В большинстве согласен с laimas.
Можно еще добавить, что совсем слабовидящие пользуются экранными читалками, для использования которой сайт совсем никуда не годится. (Нужны атрибуты aria). А есть люди которые не могут в силу разных причин пользоваться мышью, и используют клавиатуру, для перемещения по сайту. И для них совсем никуда не годится делать кнопки с помощью div, без задания реакцию на нажатие кнопок.... Но как решение задачки, вот такой код
<!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;
}
.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>
<style>
.fon{
background-color: #fff;
color: #000;
}
.chrift_osnovnoi{
font-family: sans-serif;
}
.razmer_osnovnoi{
font-size: 1rem;
}
</style>
<script>
let lnkfon = null;
let lnkchrift = null;
let lnkrazmer = null;
let mystyle = {fon: 'base', chrift: 'base', razmer: 'base'}
let head = document.querySelector('head')
function store () {
localStorage.mystyle = JSON.stringify(mystyle)
}
function setstyle (style) {
const est = document.createElement('style');
est.innerHTML = style;
head.appendChild (est);
return est;
}
function changefon (val) {
if (lnkfon) {
head.removeChild (lnkfon)
lnkfon = null
}
if (val == 'drugoi') {
lnkfon = setstyle('.fon{background-color: #000;color: #fff;}')
}
mystyle.fon = val
store()
}
function changechrift (val) {
if (lnkchrift) {
head.removeChild (lnkchrift)
lnkchrift = null
}
if (val == 'drugoi') {
lnkchrift = setstyle('.chrift{font-family: serif;}')
}
mystyle.chrift = val
store()
}
function changerazmer (val) {
if (lnkrazmer) {
head.removeChild (lnkrazmer)
lnkrazmer = null
}
if (val == '15') {
lnkrazmer = setstyle('.chrift{font-size: 1.5rem;;}')
} else if (val == '20') {
lnkrazmer = setstyle('.chrift{font-size: 2rem;;}')
}
mystyle.razmer = val
store()
}
if (localStorage.mystyle) {
mystyle = JSON.parse(localStorage.mystyle)
if (mystyle.fon != 'base') changefon (mystyle.fon)
if (mystyle.chrift == 'base') changechrift (mystyle.chrift)
if (mystyle.razmer != 'base') changerazmer (mystyle.razmer)
}
</script>
</head>
<body class="fon chrift razmer">
<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 = () =>{
changefon ('base')
knopka1.classList.add("vibran");
knopka2.classList.remove("vibran");
}
knopka1.addEventListener("click", fun_knopka1);
let fun_knopka2 = () =>{
changefon ('drugoi')
knopka1.classList.remove("vibran");
knopka2.classList.add("vibran");
}
knopka2.addEventListener("click", fun_knopka2);
let fun_knopka3 = () =>{
changechrift ('base')
knopka3.classList.add("vibran");
knopka4.classList.remove("vibran");
}
knopka3.addEventListener("click", fun_knopka3);
let fun_knopka4 = () =>{
changechrift ('drugoi')
knopka3.classList.remove("vibran");
knopka4.classList.add("vibran");
}
knopka4.addEventListener("click", fun_knopka4);
let fun_knopka5 = () =>{
changerazmer ('base')
knopka5.classList.add("vibran");
knopka6.classList.remove("vibran");
knopka7.classList.remove("vibran");
}
knopka5.addEventListener("click", fun_knopka5);
let fun_knopka6 = () =>{
changerazmer ('15')
knopka5.classList.remove("vibran");
knopka6.classList.add("vibran");
knopka7.classList.remove("vibran");
}
knopka6.addEventListener("click", fun_knopka6);
let fun_knopka7 = () =>{
changerazmer ('20')
knopka5.classList.remove("vibran");
knopka6.classList.remove("vibran");
knopka7.classList.add("vibran");
}
knopka7.addEventListener("click", fun_knopka7);
</script>
</body>
</html>
|
voraa,
как решение, это имеет большой минус потому, что такое сопровождать, так лучше повеситься. :) Всех этих fun_knopka и forEach не должно быть и близко. |
Где то я видел в инете готовое решение, разработанное в колабе с врачами, с уже подключенными библиотеками, чуть ли не texttospeech там был, стили подгружались из внешних файлов. Я думаю если от автора не требуется самописное решение, то лучше погуглить.
|
Вложений: 2
Спасибо за участие в обсуждение. Буду пробовать применить на свой проект.Рони как всегда отдельное спасибо. Сейчас начну делать то что ты предложил.
То что я выложил в код это был просто шаблон, я не могу весь когда выложить так как там черт ногу сломит. Я делаю сайт для благотворительно организации, бесплатно. По мере своих сил и умений, благо люди помогают, спасибо. И я читал и изучал вопрос что нужно и как нужно делать сайт для слабовидящих, там большая пачка ГОСТов Вот как предварительный вариант выглядит см. скриншоты. |
Ops,
Я видел эти решение они очень корявые, то есть если их вставлять то может все не очень хорошо местами выглядеть, проще саму попробовать, и тем более некоторые платные |
laimas,
то есть то что предложил voraa, лучше не пробовать использовать? |
Я понял что допустил ошибку когда предложил шаблон. Так как все было сделано для этого шаблона, но у меня при нажатие на кнопку много каких стилей будет меняться что бы подогнать верстку и что бы все выглядело хорошо.
Можно как то сделать что бы вот это функция (таких будет 5) записалась в localStorage и если мне что то потребуется изменить какие либо стили у какого либо блока я мог просто записать в эту функцию
let ikonka_1 = () => {
shapka_versia_sv_nastroiki_ikonka_1.classList.add("podherkivanie");
shapka_versia_sv_nastroiki_ikonka_2.classList.remove("podherkivanie");
body.classList.add("style1");
body.classList.remove("style2");
shapka_versia_sv.classList.add("style1");
shapka_versia_sv.classList.remove("style2");
shapka_versia_sv_nastroiki.classList.add("shapka_versia_sv_nastroiki_teni");
navigatsia_osnovnoi_blok.classList.add("style1");
navigatsia_osnovnoi_blok.classList.remove("style2");
console.log("работает1");
}
shapka_versia_sv_nastroiki_ikonka_1.addEventListener("click", ikonka_1);
|
Цитата:
Немного отступления. Яндекс при индексации отдает предпочтение тем сайтам, у которых размер шрифта не менее 14рх потому, что на мобильных устройствах меньший размер труднее читается. У меня зрение -3, а все левши как известно зачастую близоруки. И хотя я блоху не подковывал, но будучи занимаясь электроникой свободно читал на чип резисторах, размер которых около 2мм, три цифры обозначающие его номинал. Это такое маленькое преимущество близоруких, и мне собственно как то все равно было какой размер шрифта у сайта в мобильной версии, я без проблем их читаю даже маленький. Читал я и совсем крохотный на смарт часах KW06 с краном 240х320, а теперь на смарт часах с экраном 640х480 вообще проблем нет. Но подбирая браузер остановился на Опера потому, что в ней по умолчанию шрифт масштабируется так, что читать можно не напрягаясь и при этом на экране меньше лишнего хлама. У вас же, судя первой картинке, по умолчанию интерфейс сайта для пользователей без ограничений. Тогда вопрос - насколько не сильно слабовидящим должен быть слабовидящий чтобы прочесть "Настройка сайта для слабовидящего"? Вопрос такого же плана, когда он перейдет в список выбирая размеры, ведь изначально-то сам список не под него сверстан. Зачем осложнять жизнь слабовидящему, а не сделав по умолчанию версию для них, а для без ограничений наоборот пусть запрашивают. В противном случае должна быть просто кнопка - "Для слабовидящих", и это подключение ресурсов для этой темы. А вот уже в ней имеющей некие средние установки согласно рекомендациям, пользователь может не напрягаясь делать выбор. И хорошо, что это типа как на второй картинке с разным размером символов, а не в списках с "увеличить * 1,5". Подобные "визуальные" списки надо полагать и для выбора другого будут. Переключитесь в отладчике на мобильный дизайн, смотрите в нем, будет видно удобно ли будет делать выбор в интерфейсе, так как в нем размер всего уменьшится. |
laimas,
Я все протестировал и увеличенный размер будет хорошо смотреться везде. В начале я посмотрел как все будет смотреться с большим шрифтом с темным фоном что бы все было аккуратно и гармонично, у меня все сделано. Сейчас делаю этот скрипт который отвечал за запоминание. И мне очень понравилась мысль что сделать изначально для людей со слабым зрением, надо подумать над этим. |
Цитата:
|
laimas,
Я не так силен в JS я больше дизайнер, не много верстальщик. Мне нужен скрипт который б я мог понять и разобраться В этой функции мне понятно что и при каких условиях меняется, мне прото нужно это записать и сохранить что бы это работала на всем сайте и при последующих заходах на сайт. |
Цитата:
Впрочем, хозяин барин, делайте, а я такого не понимаю. :) |
Я вот записываю localStorage.setItem("ikonka_1", "ikonka_1");
Но понимаю что что то не то
let ikonka_1 = () => {
shapka_versia_sv_nastroiki_ikonka_1.classList.add("podherkivanie");
shapka_versia_sv_nastroiki_ikonka_2.classList.remove("podherkivanie");
body.classList.add("style1");
body.classList.remove("style2");
shapka_versia_sv.classList.add("style1");
shapka_versia_sv.classList.remove("style2");
shapka_versia_sv_nastroiki.classList.add("shapka_versia_sv_nastroiki_teni");
navigatsia_osnovnoi_blok.classList.add("style1");
navigatsia_osnovnoi_blok.classList.remove("style2");
localStorage.setItem("ikonka_1", "ikonka_1");
console.log("работает1");
}
shapka_versia_sv_nastroiki_ikonka_1.addEventListener("click", ikonka_1);
|
Цитата:
По уму, это наборы стилей, которые различаются только префиксами в именах, соответствующих выбранному оформлению, а в них уже прописаны необходимые значения. Менять/добавлять классы программно, вместо подключения нужных ресурсов, это бред полнейший. |
laimas,
Я понял, я это вообще пишу ветку обсуждения. Может у кого то будет желание помочь. А идею с тем что изначально сделать для слабовидящих я взял, и скорее всего создам две версии сайта, что бы предложить это этому благотворительному фонды, возможно им тоже это понравится. |
Цитата:
|
На всякий случай выложу ссылку
https://rakipov.ru/test/ там одна станица и переключение работает только смена фона |
Вот я что то подобное что мне нужно сделал, в песочности
const body = document.querySelector("body");
const knopka_1 = document.querySelector(".knopka_1");
const knopka_2 = document.querySelector(".knopka_2");
let fun_knopka_1 = () => {
body.classList.add("belyi_fon");
body.classList.remove("chernyi_fon");
localStorage.setItem("belyi_fon", "belyi_fon");
localStorage.removeItem("chernyi_fon");
}
knopka_1.addEventListener("click", fun_knopka_1);
let fun_knopka_2 = () => {
body.classList.remove("belyi_fon");
body.classList.add("chernyi_fon");
localStorage.setItem("chernyi_fon", "chernyi_fon");
localStorage.removeItem("belyi_fon");
}
knopka_2.addEventListener("click", fun_knopka_2);
let fun_1 = () => {
if (localStorage.getItem("chernyi_fon")!==null){
body.className = "chernyi_fon";
}
}
window.addEventListener("load", fun_1);
let fun_2 = () => {
if (localStorage.getItem("belyi_fon")!==null){
body.className = "belyi_fon";
}
}
window.addEventListener("load", fun_2);
Но понимаю что это не самое лучше решение. |
Rise,
У меня почему то не получилось его адаптировать Мне любой вариант подойдет главное что бы был мне понятен и я смог его вживить в свой проект. |
Вот уже тут не работает
<!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{
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
}
.main{
max-width: 480px;
margin: 0 auto;
}
.knopka_1 {
height: 24px;
width: 24px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #fff;
color: #000;
padding: 5px;
border: 1px solid #8b00ff;
cursor: pointer;
}
.knopka_1:hover {
background-color: #8b00ff;
color: #fff;
padding: 5px;
border: 1px solid #000;
}
.knopka_2 {
height: 24px;
width: 24px;
display: inline-flex;;
justify-content: center;
align-items: center;
background-color: #000;
color: #fff;
padding: 5px;
border: 1px solid #8b00ff;
cursor: pointer;
}
.knopka_2:hover {
background-color: #8b00ff;
color: #fff;
padding: 5px;
border: 1px solid #000;
}
.knopka_3 {
height: 24px;
width: 24px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #fff;
color: #000;
padding: 5px;
border: 1px solid #8b00ff;
cursor: pointer;
}
.knopka_3:hover {
background-color: #8b00ff;
color: #fff;
padding: 5px;
border: 1px solid #000;
}
.knopka_4 {
height: 24px;
width: 24px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #fff;
color: #000;
padding: 5px;
border: 1px solid #8b00ff;
cursor: pointer;
}
.knopka_4:hover {
background-color: #8b00ff;
color: #fff;
padding: 5px;
border: 1px solid #000;
}
.belyi_fon{
background-color: #fff;
color: #000;
}
.chernyi_fon{
background-color: #000;
color: #fff;
}
.osnovnoi_razmer{
font-size: .8rem;
}
.uvelichenyi_razmer{
font-size: 1.6rem;
}
</style>
</head>
<body>
<div class="main">
<div class="knopka_1"><div class="blok">А</div></div>
<div class="knopka_2"><div class="blok">А</div></div>
<div class="knopka_3"><div class="blok">1</div></div>
<div class="knopka_4"><div class="blok">2</div></div>
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium corrupti ipsa quis deserunt aperiam similique, excepturi assumenda iste autem, impedit vitae iure officia voluptatem nulla quas repudiandae quaerat, magnam explicabo vero atque. Dicta dolores, nesciunt neque optio maxime officiis quisquam assumenda placeat. Placeat praesentium, eius expedita iusto natus, asperiores quaerat magni molestiae ad ipsum quia aut cupiditate officiis dicta ducimus assumenda aliquam optio quos quas eveniet nesciunt unde deserunt. Dolorem ducimus reprehenderit voluptatem ea saepe animi rerum quos aspernatur illum! Officiis praesentium incidunt nesciunt quas exercitationem fugiat ratione minus aut at obcaecati vitae magnam in ad facere alias, quibusdam adipisci soluta pariatur! Libero eaque reprehenderit ex molestiae, dicta doloremque tempore delectus, cupiditate nam officia amet error itaque asperiores quis est dolorum fugiat, ea nostrum vel voluptatem? Laborum, perferendis molestias minima iusto culpa obcaecati dolores sint soluta, facilis, officia iure! Odit laudantium corporis incidunt ullam eius similique ab earum quae temporibus quo, voluptatum, excepturi rerum saepe exercitationem? Odio omnis, laboriosam illum reiciendis similique beatae iusto amet voluptate architecto possimus reprehenderit, qui molestiae est excepturi magni accusamus voluptates vitae eveniet. Odio dolorem, facilis magni beatae a eius optio aspernatur libero ipsum ad sint, ratione eveniet! Quasi expedita minus, dolore commodi repellat itaque quae ipsam laudantium qui fugiat quis ad! Expedita odio accusamus architecto quo at fugit veniam quibusdam quis debitis reiciendis, tempora sapiente exercitationem ipsam rerum, ratione aperiam recusandae vero, officiis quaerat quia aspernatur nemo soluta laudantium. Amet voluptate nihil deleniti dolor? Aliquid esse id quod est ipsum facilis, incidunt sunt. Dolorem laborum tenetur neque corrupti sequi reprehenderit alias odit dolores enim. Quae dolorem distinctio rem explicabo esse mollitia laborum error, veritatis pariatur cumque cum alias ipsam earum? Eveniet asperiores quas quaerat quia sint dolore, at ipsa nobis velit provident ab hic aliquam autem ex modi? Cumque illo repellendus provident veritatis beatae.
</div>
<script>
const body = document.querySelector("body");
const knopka_1 = document.querySelector(".knopka_1");
const knopka_2 = document.querySelector(".knopka_2");
const knopka_3 = document.querySelector(".knopka_3");
const knopka_4 = document.querySelector(".knopka_4");
let fun_knopka_1 = () => {
body.classList.add("belyi_fon");
body.classList.remove("chernyi_fon");
localStorage.setItem("belyi_fon", "belyi_fon");
localStorage.removeItem("chernyi_fon");
}
knopka_1.addEventListener("click", fun_knopka_1);
let fun_1 = () => {
if (localStorage.getItem("belyi_fon")!==null){
body.className = "belyi_fon";
}
}
window.addEventListener("load", fun_1);
let fun_knopka_2 = () => {
body.classList.remove("belyi_fon");
body.classList.add("chernyi_fon");
localStorage.setItem("chernyi_fon", "chernyi_fon");
localStorage.removeItem("belyi_fon");
}
knopka_2.addEventListener("click", fun_knopka_2);
let fun_2 = () => {
if (localStorage.getItem("chernyi_fon")!==null){
body.className = "chernyi_fon";
}
}
window.addEventListener("load", fun_2);
let fun_knopka_3 = () => {
body.classList.add("osnovnoi_razmer");
body.classList.remove("uvelichenyi_razmer");
localStorage.setItem("osnovnoi_razmer", "osnovnoi_razmer");
localStorage.removeItem("uvelichenyi_razmer");
}
knopka_3.addEventListener("click", fun_knopka_3);
let fun_3 = () => {
if (localStorage.getItem("osnovnoi_razmer")!==null){
body.className = "osnovnoi_razmer";
}
}
window.addEventListener("load", fun_3);
let fun_knopka_4 = () => {
body.classList.add("uvelichenyi_razmer");
body.classList.remove("osnovnoi_razmer");
localStorage.setItem("uvelichenyi_razmer", "uvelichenyi_razmer");
localStorage.removeItem("osnovnoi_razmer");
}
knopka_4.addEventListener("click", fun_knopka_4);
let fun_4 = () => {
if (localStorage.getItem("uvelichenyi_razmer")!==null){
body.className = "uvelichenyi_razmer";
}
}
window.addEventListener("load", fun_4);
</script>
</body>
</html>
Он почему то применяйт только одно значение |
По другому сделал и заработало, я стал править сам стиль а не стили.
И не понимаю как лучше сделать
const body = document.querySelector("body");
const knopka_1 = document.querySelector(".knopka_1");
const knopka_2 = document.querySelector(".knopka_2");
const knopka_3 = document.querySelector(".knopka_3");
const knopka_4 = document.querySelector(".knopka_4");
let fun_knopka_1 = () => {
body.style.backgroundColor = "#fff";
body.style.color = "#000";
localStorage.setItem("belyi_fon", "#fff");
localStorage.removeItem("chernyi_fon");
}
knopka_1.addEventListener("click", fun_knopka_1);
let fun_1 = () => {
if (localStorage.getItem("belyi_fon")!==null){
body.style.backgroundColor = "#fff";
body.style.color = "#000";
}
}
window.addEventListener("load", fun_1);
let fun_knopka_2 = () => {
body.style.backgroundColor = "#000";
body.style.color = "#fff";
localStorage.setItem("chernyi_fon", "#000");
localStorage.removeItem("belyi_fon");
}
knopka_2.addEventListener("click", fun_knopka_2);
let fun_2 = () => {
if (localStorage.getItem("chernyi_fon")!==null){
body.style.backgroundColor = "#000";
body.style.color = "#fff";
}
}
window.addEventListener("load", fun_2);
let fun_knopka_3 = () => {
body.style.fontSize = "0.8rem";
localStorage.setItem("osnovnoi_razmer", ".8rem");
localStorage.removeItem("uvelichenyi_razmer");
}
knopka_3.addEventListener("click", fun_knopka_3);
let fun_3 = () => {
if (localStorage.getItem("osnovnoi_razmer")!==null){
body.style.fontSize = "0.8rem";
}
}
window.addEventListener("load", fun_3);
let fun_knopka_4 = () => {
body.style.fontSize = "1.6rem";
localStorage.setItem("uvelichenyi_razmer", "uvelichenyi_razmer");
localStorage.removeItem("osnovnoi_razmer");
}
knopka_4.addEventListener("click", fun_knopka_4);
let fun_4 = () => {
if (localStorage.getItem("uvelichenyi_razmer")!==null){
body.style.fontSize = "1.6rem";
}
}
window.addEventListener("load", fun_4);
|
Не понимаю где допускаю ошибку.
Должно быть кликнул по первой кнопки, появилась вторая, если кнопки уже были нажаты ранее они не появляются. У меня почему то можно нажать только одну кнопку и последовательность сбита.
<style>
.polzovatelskoe_soglashenie_i_nastroiki_vida_obertka {
width: 100%;
height: auto;
background-color: #3866F3;
color: #fff;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
.polzovatelskoe_soglashenie_i_nastroiki_vida_obertka a{
color: #fff;
}
.polzovatelskoe_soglashenie_i_nastroiki_vida_obertka a:hover{
text-decoration: none;
}
.polzovatelskoe_soglashenie_obertka{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: auto;
background-color: #3866F3;
z-index: 10;
display: none;
}
.polzovatelskoe_soglashenie_blok {
max-width: 960px;
margin: 0 auto;
padding: 20px 0px 0px 0px;
display: grid;
grid-template-columns: 320px 320px;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"polzovatelskoe_soglashenie_tekst polzovatelskoe_soglashenie_tekst"
"polzovatelskoe_soglashenie_oznakomitsa knopka_ptinyat_polzovatelskoe_soglashenie_blok"
"nomer_polzovatelskoe_soglashenie nomer_polzovatelskoe_soglashenie";
justify-content: center;
align-items: center;
background-color: #3866F3;
color: #fff;
}
.polzovatelskoe_soglashenie_tekst {
grid-area: polzovatelskoe_soglashenie_tekst;
}
.polzovatelskoe_soglashenie_oznakomitsa {
grid-area: polzovatelskoe_soglashenie_oznakomitsa;
}
.knopka_ptinyat_polzovatelskoe_soglashenie_blok {
grid-area: knopka_ptinyat_polzovatelskoe_soglashenie_blok;
}
.nomer_polzovatelskoe_soglashenie {
grid-area: nomer_polzovatelskoe_soglashenie;
display: flex;
justify-content: center;
align-items: center;
}
.knopka_ptinyat_polzovatelskoe_soglashenie {
width: 280px;
height: 80px;
background-color: #4369DF;
border: 4px solid #2249C7;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.knopka_ptinyat_polzovatelskoe_soglashenie:hover {
background-color: #395BBF;
}
.nastroiki_vida_obertka{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: auto;
background-color: #3866F3;
display: none;
}
.nastroiki_vida_blok {
max-width: 960px;
margin: 0px auto 0px;
padding: 20px 0px 0px 0px;
display: grid;
grid-template-columns: 320px 320px;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"nastroiki_vida_blok_tekst nastroiki_vida_blok_tekst"
"ponyal_pereti_nastroiki_vida knopka_ponyal_blok"
"nomer_nastroiki_vida nomer_nastroiki_vida";
justify-content: center;
align-items: center;
background-color: #3866F3;
color: #fff;
}
.nastroiki_vida_blok_tekst {
grid-area: nastroiki_vida_blok_tekst;
}
.ponyal_pereti_nastroiki_vida {
grid-area: ponyal_pereti_nastroiki_vida;
}
.knopka_ponyal_blok {
grid-area: knopka_ponyal_blok;
}
.knopka_ponyal{
width: 280px;
height: 80px;
background-color: #4369DF;
border: 4px solid #2249C7;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.knopka_ponyal:hover{
background-color: #395BBF;
}
.nomer_nastroiki_vida {
grid-area: nomer_nastroiki_vida;
display: flex;
justify-content: center;
align-items: center
}
.knopka_ponyal {
}
.nomer_liniya {
width: 40%;
height: 1px;
margin: 0 auto;
background-color:#fff;
}
.nomer {
}
.shrift_belyi_32 {
font-size: 32px;
}
.polzovatelskoe_soglashenie_obertka.prinyat{
display: block;
}
.nastroiki_vida_obertka.prinyat{
display: block;
}
</style>
<div class="polzovatelskoe_soglashenie_i_nastroiki_vida_obertka">
<div class="polzovatelskoe_soglashenie_obertka">
<div class="polzovatelskoe_soglashenie_blok">
<div class="polzovatelskoe_soglashenie_tekst">
Мы просим вас принять пользовательское соглашение сайта.
</div>
<div class="polzovatelskoe_soglashenie_oznakomitsa">
<a href="#">Ознакомиться</a>
</div>
<div class="knopka_ptinyat_polzovatelskoe_soglashenie_blok">
<div class="knopka_ptinyat_polzovatelskoe_soglashenie">
Принимаю
</div>
</div>
<div class="nomer_polzovatelskoe_soglashenie">
<div class="nomer_liniya"></div>
<div class="nomer">
1/2
</div>
<div class="nomer_liniya"></div>
</div>
</div>
</div>
<div class="nastroiki_vida_obertka">
<div class="nastroiki_vida_blok">
<div class="nastroiki_vida_blok_tekst">
Хотим обратить ваше внимание, <span class="shrift_belyi_32">настройка внешнего вида сайта</span> для людей со слабым зрением находится в самом низу сайта
</div>
<div class="ponyal_pereti_nastroiki_vida">
<a href="#">ПОНЯЛ/А, перейти к настройке</a>
</div>
<div class="knopka_ponyal_blok">
<div class="knopka_ponyal">
ПОНЯЛ/А
</div>
</div>
<div class="nomer_nastroiki_vida">
<div class="nomer_liniya"></div>
<div class="nomer">
2/2
</div>
<div class="nomer_liniya"></div>
</div>
</div>
</div>
</div>
<script>
let polzovatelskoe_soglashenie_obertka = document.querySelector(".polzovatelskoe_soglashenie_obertka");
let knopka_ptinyat_polzovatelskoe_soglashenie = document.querySelector(".knopka_ptinyat_polzovatelskoe_soglashenie");
let nastroiki_vida_obertka = document.querySelector(".nastroiki_vida_obertka");
let knopka_ponyal = document.querySelector(".knopka_ponyal");
window.onload = function(){
if (!localStorage.getItem("skryt_1")){
polzovatelskoe_soglashenie_obertka.classList.add("prinyat");
knopka_ptinyat_polzovatelskoe_soglashenie.onclick = function() {
polzovatelskoe_soglashenie_obertka.classList.remove("prinyat");
localStorage.setItem("skryt_1", "none")
}
}
}
function prinyal_1(){
polzovatelskoe_soglashenie_obertka.style.display = "none";
localStorage.setItem("skryt_1","none");
}
knopka_ptinyat_polzovatelskoe_soglashenie.onclick = prinyal_1;
window.onload = function(){
if (!localStorage.getItem("skryt_2")){
nastroiki_vida_obertka.classList.add("prinyat");
knopka_ponyal.onclick = function() {
nastroiki_vida_obertka.classList.remove("prinyat");
localStorage.setItem("skryt_2", "none")
}
}
}
function prinyal_2(){
nastroiki_vida_obertka.style.display = "none";
localStorage.setItem("skryt_2","none");
}
knopka_ponyal.onclick = prinyal_2;
</script>
|
Почему два раза
window.onload = function(){ ? Второе отменяет первое. |
Цитата:
А как тогда записать условия после if |
Сергей Ракипов,
не только это, но и prinyal_1(), и prinyal_2() тоже близнецы. |
А как правильно написать?
|
Ну видимо правильно будет получить коллекцию элементов, обходом в цикле проверять - если есть в хранилище ключ равный стилю (или другое) кнопки, то ..., иначе ...
|
| Часовой пояс GMT +3, время: 00:23. |