Управление таблицами стилей
Для динамического изменения стилей CSS, которые применяются к документам, можно использовать не только встроенные стили. (Встроенные стили — это стили элементов HTML, которые задаются с помощью атрибута STYLE.) Для управления глобальными таблицами стилей, определенными с помощью тега LINK или STYLE в разделе HEAD документа, можно использовать сценарии. Управление глобальной таблицей стилей — это эффективный способ динамического изменения стилей, применяемых к веб-страницам. Содержимое раздела:
Доступ к таблицам стилей с помощью сценария Для доступа к глобальным таблицам стилей с помощью сценария используется коллекция styleSheets объекта document. В этой коллекции содержатся экземпляры элементов STYLE и LINK в разделе HEAD документа, для которых атрибут TYPE имеет значение "text/css". (Таблицы стилей других типов не поддерживаются.) Кроме того, таблицы стилей можно импортировать в элементе STYLE с помощью правила @import. Для добавления элементов STYLE и LINK в документ можно использовать метод createElement объекта document. Этот метод добавляет новый объект styleSheet в коллекцию styleSheets документа. Затем с помощью методов addRule и addImport в таблицу стилей можно добавить правила стилей и импортированные таблицы стилей. Для получения доступа к таблицам стилей документа также можно использовать идентификаторы. Для этого необходимо задать значение атрибута ID элемента LINK или STYLE. Замена таблиц стилей Чтобы заменить одну таблицу стилей на другую, необходимо в качестве значения свойства href таблицы стилей указать URL-адрес новой таблицы стилей, как показано в следующем примере. if (document.styleSheets(0).href != null) document.styleSheets(0).href = "newstyle.css"; При замене таблицы стилей коллекция styleSheets немедленно обновляется для отображения изменений. Этот способ замены доступен только для таблиц стилей, которые добавлены с помощью элемента LINK или правила @import. Для таблиц стилей, определенных с помощью элемента STYLE, свойство href имеет значение NULL. Отключение таблиц стилей Возможность динамического отключения и включения таблиц стилей является важной функцией объекта styleSheet. По умолчанию свойство disabled имеет значение false. Чтобы таблица стилей не применялась к документу, необходимо присвоить этому свойству значение true. Переключение таблиц стилей — это еще один способ динамического изменения стиля веб-страницы. Динамическое изменение правил таблиц стилей Таблица стилей — это коллекция правил. Эти правила перечисляются коллекцией rules объекта styleSheet. Эта коллекция доступна даже в том случае, если таблица стилей отключена. Для добавления и удаления правил из коллекции rules используются методы addRule и removeRule объекта styleSheet. Правило, добавленное в отключенную таблицу стилей, не будет применяться к документу до тех пор, пока отключенному свойству таблицы стилей не будет присвоено значение false. Порядок расположения правил в коллекции rules соответствует порядку расположения правил в документе. Правила стилей, импортированные с помощью синтаксиса @import CSS, расширяются в коллекции rules в соответствии со спецификацией каскадных таблиц стилей CSS Level 1 (CSS1). Абсолютное расположение правила в коллекции rules может изменяться по мере добавления или удаления правил, однако относительное расположение правил сохраняется. По умолчанию новое правило (без индекса) добавляется в конец коллекции, которая имеет наивысший приоритет (не учитывается selector specificity в соответствии со спецификацией каскадных таблиц стилей) и применяется к документу последним. Если индекс указан, правило добавляется перед правилом с указанным индексом. Если значение индекса больше количества правил в коллекции, правило добавляется в конец коллекции. В следующем примере продемонстрировано использование метода addRule. <HTML> <HEAD> <SCRIPT LANGUAGE="JScript"> function newRule() { document.styleSheets.MyStyles.addRule("P","color:blue"); } </SCRIPT> <STYLE ID="MyStyles"> H1 {color:red} H2 {color:red;font-style:italic} </STYLE> </HEAD> <BODY onclick="newRule()"> <H1>Добро пожаловать!</H1> <P>В этом документе используются таблицы стилей.</P> <H2>Способы добавления таблиц стилей:</H2> <UL> <LI>LINK <LI>STYLE <LI>@import </UL> </BODY> </HTML> Пример кода. http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/manag_01.htm Правило стилей начинается с селектора, идентифицирующего элементы, к которым применяется правило. Кроме того, правило стилей содержит список определений стиля, который задает атрибуты стиля, применяемые к элементу. В качестве имени селектора можно использовать имя элемента, класс или идентификатор, либо сочетание имен, например список имен элементов, псевдоклассов и псевдоэлементов, разделенных запятыми. Каждое определение стиля состоит из имени и значения атрибута стиля, разделенных двоеточием. Если число назначений больше 1, они отделяются точкой с запятой. (Дополнительные сведения о селекторах см. в разделе Общие сведения о селекторах CSS.) Объект правила имеет свойство readOnly, которое указывает, является ли редактируемым источник конкретного правила. Импортируемые стили, а также стили, указанные с помощью элемента LINK, не поддерживают изменение, поэтому свойство readOnly объекта правила возвращает значение true. В качестве примера управления правилами стилей рассмотрим следующую простую таблицу стилей. <STYLE ID="MyStyles"> H1 {color:red} H2 {color:red;font-style:italic} </STYLE> Коллекция правил состоит из двух правил. Каждое правило состоит из двух частей и соответствующих свойств: selectorText и style. В первом правиле таблицы стилей селектором является H1. alert(document.styleSheets[0].rules[0].selectorText); // возвращает "H1" Чтобы изменить стиль первого правила в таблице стилей, используйте приведенный ниже код. document.styleSheets[0].rules[0].style.color = "blue"; Таблицы стилей, определенные пользователями Пользователи могут указать таблицу стилей, применяемую ко всем просматриваемым страницам. Для этого необходимо в диалоговом окне Свойства браузера нажать кнопку Оформление и указать файл стилей. Пользовательская таблица стилей применяется к документу в первую очередь, однако подразумевается, что окончательное определение атрибута CSS задает автор веб-страницы. Чтобы переопределить авторскую таблицу стилей, добавьте в пользовательские определения стиля свойство "!important". В противном случае таблица стилей, определенная пользователем, будет использоваться в случае, если автор не определил правило для атрибута CSS. Таблицы стилей, определенные пользователем, не входят в состав коллекции styleSheets. Связанные разделы |