S3.Blog

Однажды ко мне подошел наш web-дизайнер и спросил:
"- А можно ли сделать так, что бы дизайн страницы сайта менялся, без запросов к веб-серверу?"
"- Можно. Для этого нужно поставить простую функцию javascript'а , что бы включать/выключать нужный список стилей. Вот, смотри, я сейчас тебе покажу как это сделать."

Допустим у нас есть три варианта оформления DIV-тэга с классом "example_div".
Пропишем стили этих трех вариантов:

<style type="text/css" id="design_1" title="design_1">
DIV.example_div {
	background-color: red;
	width: 250px;
	border: 2px #000000 solid;
	color: #000000;
}
</style>

<style type="text/css" id="design_2" title="design_2">
DIV.example_div {
	background-color: green;
	width: 250px;
	border: 2px blue solid;
	color: yeelow;
}
</style>

<style type="text/css" id="design_3" title="design_3">
DIV.example_div {
	background-color: black;
	width: 250px;
	border: 2px red solid;
	color: #ffffff;
}
</style>

Теперь создадим на нашей странице DIV с классом example_div ...

<div class="example_div">этот див будет менять свой стиль</div>

...и установим три кнопки, которые будут включать один из трех, описанных ранее, вариантов стилей.

<input type="button" value="1" onclick="change_design('design_1')">
<input type="button" value="2" onclick="change_design('design_2')">
<input type="button" value="3" onclick="change_design('design_3')">

Теперь осталось только прописать javascript-функцию change_design()

<script language="javascript">
function change_design(design_id) {

	// Заносим в переменную hash_css имена наших переключаемых стилей
	var hash_css = {'design_1':1, 'design_2':1, 'design_3':1};

	// Просматриваем все стили, которые есть на нашей странице
 	for (var i=0; i<document.styleSheets.length; i++) {
		var s = document.styleSheets[i];
		var name_style = s.id || s.title;

		// Если имя нашедшегося стиля соответствует одному из переключаемых
		// и оно не соответствует передаваемому, то выключаем его 
		if (hash_css[name_style] && (name_style != design_id)) {
			s.disabled = true;
		}
		// Если имя нашедшегося стиля соответствует одному из переключаемых
		// и оно соответствует передаваемому, то включаем его 
  		if (hash_css[name_style] && (name_style == design_id)) {
			s.disabled = false;
		}
	}
}
</script>

В итоге у вас должно получиться вот так: