Переключение стилей это прекрасный способ улучшить удобство использования сайта. Каждый пользователь при желании может подобрать вид сайта “под себя” - выбрать стиль с нужной цветовой гаммой, количеством графики, размером шрифта. Все зависит только от изобретательности дизайнера и желания предоставить выбор для пользователей. При помощи же JavaScript переключение стилей сайта можно сделать “на лету”, без перезагрузки страницы - это сделает выбор нужного стиля более удобным. Сегодня я расскажу, как это можно сделать.

Для начала немного теории. Фактически существуют три типа таблиц стилей:

1. Постоянный (persistent) - атрибут rel этого стиля установлен в значение stylesheet, а атрибут title отсутствует. Такой тип стилей включен всегда.
2. Предпочтительный (preferred) - по умолчанию включен, но он отключается, если активирована альтернативная таблица стилей. Для этого стиля атрибут res равен stylesheet, и обязательно установлен атрибут title.
3. Альтернативный (alternate) - по умолчанию выключен. Альтернативные таблицы стилей имеют атрибут rel равным alternate stylesheet и установленый атрибут title. (для IE важен именно такой порядок ключевых слов, при rel=”stylesheet alternate” указанная ниже функция в этом браузере не работает).

Хотя стили можно указывать разными способами, однако переключение стилей будет работать только с теми таблицами, которые подключены с использованием тэга link.

При помощи JavaScript можно включать/выключать любые таблицы стилей или же добавлять новые, однако на мой взгляд удобнее работать с предпочтительными и альтернативными стилями, держа общие значения стилей в постоянных таблицах. Именно так я и буду делать в этом уроке. Само же включение/выключение стилей мы будем производить при помощи атрибута disabled (при false - таблица стилей отключена).

Итак - функция, при помощи которой можно переключать стили:

function switchStyleSheet(title) {
	var links = document.getElementsByTagName('link');

	for (var i = 0, len = links.length; i < len; i++) {
		var rel = links[i].getAttribute('rel');
		var linkTitle = links[i].getAttribute('title');

		if (/(^| )stylesheet( |$)/.test(rel) && linkTitle != null && linkTitle != '') {
			links[i].disabled = true;
			if (linkTitle == title)
				links[i].disabled = false;
		}
	}
}

Здесь, мы сначала получаем все элементы link на странице, затем проверяем значения атрибута rel, который обязательно должен содержать значение stylesheet и title. Получив таким образом все предпочтительные и альтернативные стили, мы отключаем их, устанавливая атрибут disabled в значение true.

Если нужно сохранить выбор, то можно записывать значение выбранной таблицы стилей в cookies и при переходе на другую страницу активировать нужные стили на сервере. Чтобы сохранить значение title в cookies, добавьте следующую строку в функцию switchStyleSheet:

document.cookie = 'stylesheet=' + title;

Пример

Для примера, создадим простой HTML документ в который добавим следующие стили:

<link href="style.css" type="text/css" rel="stylesheet" />
<link href="style_alt_white.css" type="text/css" rel="alternate stylesheet" title="white style" />
<link href="style_alt_red.css" type="text/css" rel="alternate stylesheet" title="red style" />
<link href="style_alt_green.css" type="text/css" rel="alternate stylesheet" title="green style" />
<link href="style_alt_blue.css" type="text/css" rel="alternate stylesheet" title="blue style" />

Стиль style.css является постоянным и следовательно будет применятья к документу всегда. Четыре остальных стиля по умолчанию выключены, так как являются альтернативными. Для переключения стилей создадим три ссылки, которые поместим в сайдбар:

<ul>
<li><a href="#" onclick="switchStyleSheet('red style')">Красный</a></li>
<li><a href="#" onclick="switchStyleSheet('green style')">Зеленый</a></li>
<li><a href="#" onclick="switchStyleSheet('blue style')">Синий</a></li>
<li><a href="#" onclick="switchStyleSheet('white style')">Белый</a></li>
</ul>

При щелчке на ссылке будет активироваться таблица стилей с соответствующим атрибутом title.

смотреть демо

К сожалению, Internet Explorer не применяет альтернативные стили, для которых установлен атрибут media, поэтому вышеприведенная функция в этом случае работать не будет. Однако IE нормально работает с предпочтительными таблицами стилей, поэтому, чтобы активировать стили, нужно вместе со свойством disabled изменить также атрибут rel:

function switchStyleSheet(title, media) {
	if (typeof media == "undefined" || media == "") {
		media = ".*";
	}

	var mediaPattern = new RegExp("(^|,)\s*" + media + "\s*(,|$)");

	var links = document.getElementsByTagName("link");
	for (var i = 0; i < links.length; i++) {
		var rel = links[i].getAttribute("rel");
		var linkTitle = links[i].getAttribute("title");

		if (/(^| )stylesheet( |$)/.test(rel) && linkTitle != null && linkTitle != "") {
			var styleMedia = links[i].getAttribute("media");
			if (styleMedia == null || styleMedia == "" || styleMedia == "all" || mediaPattern.test(styleMedia)) {
				links[i].disabled = true;
				links[i].rel = "alternate stylesheet";

				if (linkTitle == title) {
					links[i].disabled = false;
					links[i].rel = "stylesheet"
				}
			}
		}
	}

	document.cookie = "stylesheet=" + title;
}

Эта расширенная функция проверяет, передано ли ей значение media. Если нет, то она проверяет все таблицы стилей с указанным значением title независимо от типа медиа. Дополнительное выражение if проверяет тип медиа, затем обновляются значения disabled и rel каждого элемента link.

Запись добавлена 5 апреля 2008 в категории CSS.Вы можете следить за комментариями используя ленту новостей RSS 2.0.Вы можете оставить комментарий, или отправить trackback со своего сайта.