S3.Blog

23 Марта 2017
A A A   RSS-лента
"Я знаю, что ничего не знаю, но многие не знают и этого". Сократ [?].

JavaScript: Переключаем стили

Дата последнего изменения: 1 Октября 2009
Метки статьи: Готовые решения, © Авторское, HTML, JavaScript
Однажды ко мне подошел наш 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>
Обратите внимание на design_1, design_2 и design_3
Именно по этим идентификаторам мы будем определять, какой включить стиль.

Теперь создадим на нашей странице 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>

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

этот див будет менять свой стиль


   


Похожие материалы:




пасанчик (гость) • ответить
чет не понятненько...
Сергей (гость) • ответить
В Opera по-умолчанию загружается последний стиль. В Хроме третий вообще не работает ((
Корректно работает только в Мозиле. Вариант не подходит (
Александрответить
на момент написания статьи работало везде

 
 
  Имя *:   Решите пример *: =
 
Полужирный Курсив Подчеркнутый Перечеркнутый
 
Вставить изображение Сделать цитатой Вставить ссылку Вставить код

Вставить смайл
 
 

 



© S3.Blog: Если критикуешь, не предлагая решения проблемы, то ты становишься частью этой проблемы.