Здравствуйте, помогите, пожалуйста, разобраться с проблемой.
Пишу скрипт для переключения оформления сайта. Принципиальная схема такая:
Есть кнопка, при нажатии которой добавляются классы в body, и изымается дефолтный.
При необходимости посетитель может понажимать дополнительно появившиейся кнопки для изменения размера шрифта, и цветового оформления.
Написанный ранее скрипт работает на всех браузерах, кроме злополучного IE8 и ранее, поскольку использованы были такие свойства как classlist, например.
Пробовал внедрить разные библиотеки, polyfill, но единственное к чему это привело, так это к тому, что сайт стал жутко долго грузиться. В связи с этим, решил что лучше всего будет переписать скрипт, используя более примитивный синтаксис, но пробелы в знаниях не позволяют реализовать задумку.
На мой взгляд, основная проблема состоит в том, что я записываю в localstorage три разных типа (с логической точки зрения) классов, которые должны менять разные свойства отображения, обращаясь в CSS-файл, и тут возникает конфликт.
Сделал вывод localstorage в консоль и постоянно наблюдаю одну и ту же картину: один и тот же класс записан в несколько раз.
Разными путями пытался решить проблему и уже запутался, так что, вполне допускаю, что на данный момент в коде присутствуют повторения или лишние команды. Итак, вот так выглядит код на данный момент:
function hasClass(el, className) {
if (el.classList)
return el.classList.contains(className)
else
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
}
function addClass(el, className) {
if (el.classList)
el.classList.add(className)
else if (!hasClass(el, className)) el.className += " " + className
}
function removeClass(el, className) {
if (el.classList)
el.classList.remove(className)
else if (hasClass(el, className)) {
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
el.className=el.className.replace(reg, ' ')
}
}
function addstyle(className){
var bodyver = document.getElementsByTagName("body")[0];
addClass(bodyver, className);
localStorage.setItem("statever", className);
}
function addcolor(className){
var bodycol = document.getElementsByTagName("body")[0];
addClass(bodycol, className);
localStorage.setItem("statecol", className);
}
function addsize(className){
var bodysize = document.getElementsByTagName("body")[0];
addClass(bodysize, className);
localStorage.setItem("statesize", className);
}
function clearstyle(className){
var bodyclear = document.getElementsByTagName("body")[0];
removeClass(bodyclear, className);
localStorage.removeItem("className");
}
<button onclick="addstyle('style-c'); addstyle('style-a'); addstyle('style-blackfont-whitebgr'); clearstyle('style-norm');" class="style-c" id="click-style-c" style="font-size:18px; background:none; border:none;">Кнопка вызова дополнительной панели</button>
<!--При клике появляется вот это !-->
<p style="font-size:30px; text-align:center;">Размер:<button onclick="addsize('style-a'); clearstyle('style-aa'); clearstyle('style-aaa');" class="style-a" style="font-size:30px; background:none; border:none;">А</button>
<button onclick="addsize('style-aa'); clearstyle('style-a'); clearstyle('style-aaa');" class="style-aa" style="font-size:40px; background:none; border:none;">А</button>
<button onclick="addsize('style-aaa'); clearstyle('style-a'); clearstyle('style-aa');" class="style-aaa" style="font-size:50px; background:none; border:none;">А</button>
Цвет:<button onclick="addcolor('style-blackfont-whitebgr'); clearstyle('style-whitefont-greenbgr'); clearstyle('style-whitefont-blackbgr');" class="style-blackfont-whitebgr" style="font-size:50px; color:black; background:white; border:black;">А</button>
<button onclick="clearstyle('style-blackfont-whitebgr'); addcolor('style-whitefont-greenbgr'); clearstyle('style-whitefont-blackbgr');" class="style-whitefont-greenbgr" style="font-size:50px; color:white; background:green; border:black;">А</button>
<button onclick="clearstyle('style-blackfont-whitebgr'); clearstyle('style-whitefont-greenbgr'); addcolor('style-whitefont-blackbgr');" class="style-whitefont-blackbgr" style="font-size:50px; color:white; background:black; border:black;">А</button>
<button onclick="addstyle('style-norm'); clearstyle('style-c'); clearstyle('style-a'); clearstyle('style-aa'); clearstyle('style-aaa'); clearstyle('style-blackfont-whitebgr'); clearstyle('style-whitefont-greenbgr'); clearstyle('style-whitefont-blackbgr');" class="style-norm" style="font-size:30px; background:none; border:none;">Обычная версия</button></p>
var statever = localStorage.getItem("statever");
addstyle(!!statever ? statever : "style-norm");
var statecol = localStorage.getItem("statecol");
addcolor(!!statecol ? statecol : "style-norm");
var statesize = localStorage.getItem("statesize");
addsize(!!statesize ? statesize : "style-norm");
console.log(statever);
console.log(statecol);
console.log(statesize);
var bodyclassstylec = localStorage.getItem("statever");
if (bodyclassstylec.className = 'style-c'){
localStorage.getItem("statever");
localStorage.getItem("statecol");
localStorage.getItem("statesize");
removeClass(bodyclassstylec, 'style-norm');
localStorage.removeItem('style-norm');
}
var bodyclassstylenorm = localStorage.getItem("statever");
if (bodyclassstylenorm.className != 'style-c'){
addClass(typeofbody, 'style-norm');
removeClass(bodyclassstylenorm, 'style-c');
removeClass(bodyclassstylenorm, 'style-a');
removeClass(bodyclassstylenorm, 'style-aa');
removeClass(bodyclassstylenorm, 'style-aaa');
removeClass(bodyclassstylenorm, 'style-blackfont-whitebgr');
removeClass(bodyclassstylenorm, 'style-whitefont-greenbgr');
removeClass(bodyclassstylenorm, 'style-whitefont-blackbgr');
localStorage.removeItem('style-c');
localStorage.removeItem('style-a');
localStorage.removeItem('style-aa');
localStorage.removeItem('style-aaa');
localStorage.removeItem('style-blackfont-whitebgr');
localStorage.removeItem('style-whitefont-greenbgr');
localStorage.removeItem('style-whitefont-blackbgr');
}
var bodyclassstylea = localStorage.getItem("statesize");
if (bodyclassstylea.className = "style-a"){
addClass(bodyclassstylea, 'style-c');
removeClass(bodyclassstylea, 'style-aa');
removeClass(bodyclassstylea, 'style-aaa');
localStorage.removeItem('style-aa');
localStorage.removeItem('style-aaa');
}
var bodyclassstyleaa = localStorage.getItem("statesize");
if (bodyclassstyleaa.className = "style-aa"){
addClass(bodyclassstyleaa, 'style-c');
removeClass(bodyclassstyleaa, 'style-a');
removeClass(bodyclassstyleaa, 'style-aaa');
localStorage.removeItem('style-a');
localStorage.removeItem('style-aaa');
}
var bodyclassstyleaaa = localStorage.getItem("statesize");
if (bodyclassstyleaaa.className = "style-aaa"){
addClass(bodyclassstyleaaa, 'style-c');
removeClass(bodyclassstyleaaa, 'style-a');
removeClass(bodyclassstyleaaa, 'style-aa');
localStorage.removeItem('style-a');
localStorage.removeItem('style-aa');
}
var bodyclassstylebw = localStorage.getItem("statecol");
if (bodyclassstylebw.className = "style-blackfont-whitebgr"){
addClass(bodyclassstylebw, 'style-c');
removeClass(bodyclassstylebw, 'style-whitefont-greenbgr');
removeClass(bodyclassstylebw, 'style-whitefont-blackbgr');
localStorage.removeItem('style-whitefont-greenbgr');
localStorage.removeItem('style-whitefont-blackbgr');
}
var bodyclassstylewg = localStorage.getItem("statecol");
if (bodyclassstylewg.className = "style-whitefont-greenbgr"){
addClass(bodyclassstylewg, 'style-c');
removeClass(bodyclassstylewg, 'style-blackfont-whitebgr');
removeClass(bodyclassstylewg, 'style-whitefont-blackbgr');
localStorage.removeItem('style-blackfont-whitebgr');
localStorage.removeItem('style-whitefont-blackbgr');
}
var bodyclassstylewb = localStorage.getItem("statecol");
if (bodyclassstylewb.className = "style-whitefont-blackbgr"){
addClass(bodyclassstylewb, 'style-c');
removeClass(bodyclassstylewb, 'style-blackfont-whitebgr');
removeClass(bodyclassstylewb, 'style-whitefont-greenbgr');
localStorage.removeItem('style-blackfont-whitebgr');
localStorage.removeItem('style-whitefont-greenbgr');
};
Само по себе переключение в рамках одной страницы работает так как нужно, но если обновить страницу или перейти на соседнюю, то и в localstorage остается бардак, и как следствие в классах body постоянно находятся противоречащие необходимому результату классы.
логика конечного результата по классам такова:
Если нужна обычная версия, то должен сохраняться класс style-norm.
Если же нужно убрать лишнее оформление, то style-norm исключается, и ему на смену приходит style-c. При Нажатии кнопки вызова доп.панели прописываются так же style-a и style-blackfont-whitebgr.
Далее размер шрифтов регулируется классами style-a, style-aa, style-aaa (они друг друга исключают, а так же одновременно с ними не должен существовать класс style-norm, и обязательно должен быть style-c).
Цвет шрифтов регулируется классами style-blackfont-whitebgr, style-whitefont-blackbgr, style-whitefont-greenbgr (они друг друга исключают, а так же одновременно с ними не должен существовать класс style-norm, и обязательно должен быть style-c).
Простите, за огромное количества текста, я никого не держу за идиота - просто я то свою логику понимаю, а вот из кода (тем более, что раз уж он не работает так, как мне необходимо) может быть не всё очевидно.
