В стандартной верстке должен присутствовать тег <link> который указывает браузеру путь к файлу со стилями. Этот тег мы и будем менять, а точнее путь к файлу.
Code
<link rel="stylesheet" type="text/css" href="red.css" id="changeable_styles"></link>
Как видите, помимо стандартных атрибутов я добавил id="changeable_styles". Это будет идентификатор тега <link>, который мы будем менять.
Между <head></head> установите код, который я привел ниже.
Code
<script>
function setCookie(a,b,c){if(c){var d=new Date();d.setTime(d.getTime()+(c*24*60*60*1000));var e="; expires="+d.toGMTString()}else var e="";document.cookie=a+"="+b+e+"; path=/"};function getCookie(a){var b=a+"=";var d=document.cookie.split(';');for(var i=0;i<d.length;i++){var c=d[i];while(c.charAt(0)==' ')c=c.substring(1,c.length);if(c.indexOf(b)==0)return c.substring(b.length,c.length)}return null};function eraseCookie(a){setCookie(a,"",-1)};
</script>
Этот код облегчает установку Cookies, которую мы будем использовать.
Перед </body> поставьте еще один код.
Code
<script>
+function() {
std = 'red.css'; // стандартные стили
if(getCookie('color_of_style')){var color=getCookie('color_of_style')}else{var color=std};document.getElementById('changeable_styles').href=color;
}();
</script>
Измените тут значение переменной std. У меня оно 'red.css' — это путь к стандартным стилям.
А теперь сами кнопки. Их может быть больше, но я решил на примере двух.
Code
<input type="button" onclick="setCookie('color_of_style', 'blue.css', 365); document.getElementById('changeable_styles').href = 'blue.css';" value="Blue">
<input type="button" onclick="setCookie('color_of_style', 'red.css', 365); document.getElementById('changeable_styles').href = 'red.css';" value="Red">
В этих кнопках Вам нужно лишь изменить путь к Вашим стилям ('blue.css' и 'red.css') в двух местах в каждой из кнопок, а так же то, что будет написано на кнопке.
Если Вы все сделали правильно, то переключатель стилей заработает. Удачи.
