Показать сообщение отдельно
  #10 (permalink)  
Старый 14.07.2017, 14:30
Интересующийся
Отправить личное сообщение для zapalych Посмотреть профиль Найти все сообщения от zapalych
 
Регистрация: 30.06.2017
Сообщений: 11

Проблема решена! Огромное спасибо за помощь.
На всякий случай, оставлю итоговый код, вдруг кому-то пригодится. Он, конечно, не идеален, но работает без подключения дополнительных библиотек. Только что проверил на IE8, всё переключается так, как задумано!

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);
}


<div class="style-form" style="margin:0; padding:0; position:fixed; top:60px; right:20px; z-index:99999;">
<button onclick="addsize('style-a'); addcolor('style-blackfont-whitebgr'); addstyle('style-c'); clearstyle('style-norm');" class="style-c" id="click-style-c" style="font-size:18px; background:none; border:none;">Включить доп.панель</button>
</div>


<!-- Панель доп.изменений !-->
<div class="panel-style-c">
<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>
</div>


var statever = localStorage.getItem("statever");
addstyle(!!statever ? statever : "style-norm");
var statecol = localStorage.getItem("statecol");
addcolor(!!statecol ? statecol : "");
var statesize = localStorage.getItem("statesize");
addsize(!!statesize ? statesize : "");

console.log(statever);
console.log(statecol);
console.log(statesize);

var bodyclassstylec = document.body;
	if (statever == 'style-c'){
		localStorage.getItem("statever");
		localStorage.getItem("statecol");
		localStorage.getItem("statesize");
		removeClass(bodyclassstylec, "style-norm");
		localStorage.removeItem("style-norm");
	}

var bodyclassstylenorm = document.body;
	if (statever !== 'style-c'){
		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");
		addClass(bodyclassstylenorm, "style-norm");
		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 = document.body;
	if (bodyclassstylea == 'style-a'){
		addClass(bodyclassstylea, 'style-c');
		removeClass(bodyclassstylea, "style-aa");
		removeClass(bodyclassstylea, "style-aaa");
		removeClass(bodyclassstylea, "style-norm");
		localStorage.removeItem("style-aa");
		localStorage.removeItem("style-aaa");
		localStorage.removeItem("style-norm");
	} else if (bodyclassstylea == 'style-aa'){
		addClass(bodyclassstylea, 'style-c');
		removeClass(bodyclassstylea, "style-a");
		removeClass(bodyclassstylea, "style-aaa");
		removeClass(bodyclassstylea, "style-norm");
		localStorage.removeItem("style-a");
		localStorage.removeItem("style-aaa");
		localStorage.removeItem("style-norm");
	} else if (bodyclassstylea =='style-aaa'){
		addClass(bodyclassstylea, 'style-c');
		removeClass(bodyclassstylea, "style-a");
		removeClass(bodyclassstylea, "style-aa");
		removeClass(bodyclassstylea, "style-norm");
		localStorage.removeItem("style-a");
		localStorage.removeItem("style-aa");
		localStorage.removeItem("style-norm");
	}

var bodyclassstyle = document.body;
	if (bodyclassstyle == 'style-blackfont-whitebgr'){
		addClass(bodyclassstyle, 'style-c');
		removeClass(bodyclassstyle, "style-whitefont-greenbgr");
		removeClass(bodyclassstyle, "style-whitefont-blackbgr");
		localStorage.removeItem("style-whitefont-greenbgr");
		localStorage.removeItem("style-whitefont-blackbgr");
		localStorage.removeItem("style-norm");
	}else if (bodyclassstyle == 'style-whitefont-greenbgr'){
		addClass(bodyclassstyle, "style-c");
		removeClass(bodyclassstyle, "style-blackfont-whitebgr");
		removeClass(bodyclassstyle, "style-whitefont-blackbgr");
		localStorage.removeItem("style-blackfont-whitebgr");
		localStorage.removeItem("style-whitefont-blackbgr");
		localStorage.removeItem("style-norm");
	} else if (bodyclassstyle == 'style-whitefont-blackbgr'){
		addClass(bodyclassstyle, "style-c");
		removeClass(bodyclassstyle, "style-blackfont-whitebgr");
		removeClass(bodyclassstyle, "style-whitefont-greenbgr");
		localStorage.removeItem("style-blackfont-whitebgr");
		localStorage.removeItem("style-whitefont-greenbgr");
		localStorage.removeItem("style-norm");
	}
Ответить с цитированием