Свойства таблиц стилей

В JavaScript имеется объект stylesheet, который позволяет получить доступ к информации о таблице стилей, на которую ссылается текущая web-страница, такую как отключена она или нет, ее местоположение, и список правил CSS, которые она содержит. Полный список свойств объекта stylesheet (и многих других вещей также) можно найти в документации W3C по DOMтаблиц стилей (Document Object Model Style Sheets - http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html).

Давайте рассмотрим (в данный момент) теоретический пример - пусть имеется web-сайт, где представлена серия технических статей. Мы хотим привлечь внимание к некоторым из этих статей с помощью интересной анимированной карусели, но как быть с пользователями, у которых JavaScript не включен по каким-то причинам? Вспоминая полученные знания о ненавязчивом JavaScript, мы хотим, чтобы функции Web-сайта также работали для этих пользователей, но мы можем захотеть оформить сайт для этих пользователей по-другому, чтобы им было удобно использовать сайт, даже без карусели.

Мы хотим иметь таблицу стилей, которая активируется, только если активируется JavaScript. Нам повезло - интерфейс DOM таблиц стилей предоставляет нам доступ к атрибуту disabled, который позволяет включать и выключать таблицы стилей.

Большинство свойств объекта stylesheet предназначены только для чтения, но некоторые, такие как disabled, можно изменять.

Можно также использовать свойства таблиц стилей, чтобы различать несколько таблиц стилей на странице. Свойство src может помочь идентифицировать внешние таблицы стилей, но не может указать внутренние элементы стиля. Лучший способ, который позволяет ссылаться как на внутренние, так и на внешние таблицы стилей по отдельности, состоит в использовании свойства title. При последовательном просмотре document.styleSheets можно различать таблицы стилей, использованные на странице. Следующий пример показывает, как это можно реализовать:

Для каждого объекта stylesheet, извлеченного из массива styleSheets, можно получить доступ к его свойству title, чтобы проверить, что оно содержит заголовок, который требуется найти. Действующий пример этого можно видеть в примере по добавлению и удалению правил, который рассматривается в следующем разделе.

Переключение между различными таблицами стилей на основе предпочтений пользователей является достаточно общим свойством web-сайтов - используя, рассмотренные до сих приемы, можно задать несколько таблиц стилей и использовать только те, которые текущий посетитель сайта хотел бы увидеть. Давайте посмотрим на реальный пример - вначале оформляется текст, но когдаатрибут disabled задается как true, определенный нами CSS будет отключен. Можно снова легко включить CSS, задаваяdisabled как false. Посмотрите пример со свойствами таблиц стилей (http://dev.opera.com/articles/view/dynamic-style-css-javascript/stylesheetproperties.html), чтобы увидеть, как это можно использовать.