Как сменить дизайна сайта с запоминанием в куки?

Question

[partyzanx]

У меня есть такой код
Прописано в css:
.eco {display: none;}
Прописано в html на каждой странице перед открывающим тегом < body > (именно там нужно перед тегом боди):

<div class="eco"><style>.head2 {display: none;} [и так далее]</style></div>

Суть такова. Мне нужна кнопка на сайте, которая находится в настройках изверя, и она делает класс .eco видимым display: initial. И таким образом этот div class="eco" активируется, задаёт новый дизайн сайту, и запоминается в куки на 40 дней.

Высшим пилотажом было бы, если эта кнопка как активировала бы, так и дизактивировала бы опять этот div class="eco" при повторном нажатии.

Я новичок-любитель, поэтому благодарю за конкретику заранее!

Answer 1

[Stalker_RED]

Не сработает.

1. Тег div нельзя размещать перед body.
2. Стили всегда будут активны, вне зависимости от значения display у обертки.
3. Одних только html и css недостаточно для решения проблемы, нужно прикручивать js или какой-то серверный язык.

Comments

[partyzanx]

Буду рад если найдётся решение.

[Stalker_RED]

partyzanx: пара вариантов:
1. подключать разные файлы стилей в зависимости от куки
2. менять класс на body, например, и к нему привязывать изменения дизайна

[partyzanx]

Stalker_RED:
1. Вот интересует именно менять с запоминанием куки, потому что (2) менять класс на body сделает сайт нагромождённым)

[dinegnet]

partyzanx: Куки без серверной части??????????????????????????????????????????????????????????

[partyzanx]

dinegnet: у меня сайт на юкозе, там есть php и uapi

Answer 2

[partyzanx]

Я нашёл такое решение

<link id="dyncss" rel="stylesheet" type="text/css" href=""> 
 <script type="text/javascript"> 
 function setDynCSS(url) { 
 if (!arguments.length) { 
 url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1]; 
 if (!url) return ''; 
 } 
 document.getElementById('dyncss').href = url; 
 var d = new Date(); 
 d.setFullYear(d.getFullYear() + 1); 
 document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join(''); 
 return url; 
 } 
 setDynCSS(); 
 </script>

и html

<img style="cursor:pointer; width: 30px; height:30px;" src="/social/firefox.png" onclick="setDynCSS('/_st/my.css')"> 
<img style="cursor:pointer; width: 30px; height:30px;" src="/social/ie.png" onclick="setDynCSS('/css/new_1.css')">

Но у меня есть отдельные элементы style, которые я бы хотел чтобы работали только при активации первого /_st/my.css.
Что нужно прописать в ява скрипт, чтобы при нажатии кнопки /_st/my.css эти элементы работали, а при нажатии другой кнопки выключались?