События в DOM

Изменение содержимого таблицы стилей

Операции с таблицами стилей

Таблицы стилей

Средства DOM для таблиц стилей в документе HTML позволяют выполнять как операции над таблицами как объектами, так и операции над содержимым таблиц (правилами и свойствами).

Таблица стилей задается в документе HTML либо как внутренняя (внедренная) таблица стилей (с помощью элемента style) (см. 4.3.12.1) или заданием ссылки на внешнюю (связываемую) таблицу (с помощью элемента link) (см. 4.3.12.2). Кроме этого, в элементе с помощью правила @import может быть задана ссылка на вставляемую (импортируемую) внешнюю таблицу стилей (см. 4.3.12.3).

Чтобы иметь возможность выполнять операции с таблицами стилей, для объекта document введена коллекция styleSheets, которая содержит все элементы style и link в порядке их появления в документе HTML. Индексация элементов в коллекции начинается с индекса 0. Свойство length этой коллекции, доступное только для чтения, содержит количество элементов в коллекции.

Отдельный элемент коллекции является объектом styleSheet. Для этого объекта определены следующие основные свойства (только для чтения):

· href – содержит значение атрибута href элемента link; для элемента style равно пустой строке или null;

· id – содержит значение атрибута id элемента style или link;

· media – содержит значение атрибута media элемента style или link;

· title – содержит значение атрибута title элемента style или link;

· type – содержит значение атрибута type элемента style;

· parentStyleSheet – для импортированной (с помощью правила @import) таблицы стилей содержит объект типа styleSheet, в котором задано правило @import; в противном случае содержит null.

Свойство media в Internet Explorer имеет строковый тип и доступна не только для чтения, но и модификации, а в остальных Web-браузерах (Firefox, Opera и Safari) является коллекцией MediaList, элементами которой являются имена отдельных устройств в значении атрибута media элемента style или link.

Коллекция MediaList имеет два свойства:

· mediaText – содержит строковое представление атрибута media (свойство доступно как для чтения, так и модификации);

· length – содержит количество имен устройств в списке значений атрибута media (только для чтения).

Для операций с именами устройств в списке в коллекции MediaList определено три метода:

· item(индекс) – получение имени устройства с заданным индексом в списке (индексация элементов списка начинается с индекса 0);

· appendMedium(новое-имя) – добавление в список нового устройства с именем новое-имя;

· deleteMedium(имя) – удаление из списка устройства с заданным именем.

Для объекта styleSheet определено также свойство owningElement в Internet Explorer и свойство ownerNode в остальных Web-браузерах (Firefox, Opera и Safari). Эти свойства содержат узел (объект типа Node) для элемента style или link и доступны только для чтения.

Кроме перечисленных выше свойств, для объекта styleSheet определено свойство disabled, определяющее состояние таблицы стилей: выключена (значение true) или включена (значение false). Правила в выключенной таблицу стилей игнорируются. Свойство disabled доступно как для чтения, так и для модификации.

Если в документе HTML определено несколько элементов style и/или link, то по умолчанию:

· в Internet Explorer и Opera все элементы коллекции включены;

· в Firefox включенным является только первый элемент коллекции, остальные выключены;

· в Safari коллекция styleSheets состоит только из одного (первого) элемента, остальные элементы style или link игнорируются.

Пример 4.5.39. Вывод и изменение свойств объекта styleSheet:

В заголовке документа HTML заданы следующие элементы link и style:

<link title="Внешняя таблица стилей" type="text/css"

rel="stylesheet" href="styles/cssExt.css" media="screen"/>

<style type="text/css" title="Внутренняя таблица стилей"

media="screen">

h2 {

font-weight: bold; color: red

}

span.obj {

font-family:"Courier New";

font-weight: bold; color: navy

}

</style>

Внешняя таблица стилей cssExt.css содержит следующие правила:

h2 { text-align: center; font-weight: bold; color: blue}

p {text-align: justify; color: green}

span.en { font-style: italic; color: black}

В теле документа HTML определен следующий текст:

<h2>Стили в DOM</h2>

<h3>Операции с таблицами стилей</h3>

<p>Для операций над таблицами стилей, объект

<span class="obj">document</span> в

<span class="en">DOM Level 2 Style</span>

содержит <span class="select">коллекцию</span>

<span class="obj">styleSheets</span>, элементами

которой являются таблицы стилей документа (в том

числе и внешние таблицы стилей). Каждая таблица стилей

представляется <span class="select">объектом</span>

<span class="obj">styleSheet</span>.</p>

Для добавления имени устройства "print" в атрибут media элемента link необходимо выполнить следующие предложения:

// Если Web-браузер - Internet Explorer

if(navigator.userAgent.indexOf("MSIE")!= -1)

// Добавление имени устройства в строку media

document.styleSheets[0].media += ",print";

else

// Добавление имени устройства в коллекцию

// MediaList

document.styleSheets[0].media.appendMedium("print");

Для включения таблицы стилей, заданной в элементе style, в Firefox, необходимо выполнить следующие предложения:

// Если Web-браузер - Firefox

if(navigator.userAgent.indexOf("Firefox")!= -1)

// Включение второй таблицы стилей

document.styleSheets[1].disabled = false;

Вывод Web-страницы в различных Web-браузерах будет иметь следующий вид:

(в Internet Explorer, аналогично в Firefox и Opera)

(в Safari)

Для вывода значений свойств объекта styleSheet можно использовать следующую функцию:

function showSheetChars() {

// Определение и вывод количества объектов

// styleSheet в коллекции styleSheets

styleSheetListLength = document.styleSheets.length;

alert("styleSheetListLength = " +

styleSheetListLength);

// Вывод свойств объектов styleSheet в цикле

for(i = 0; i < styleSheetListLength; i++)

{

// Получение текущего объекта styleSheet

styleSheetElement = document.styleSheets[i];

// Задание начального значения строки media

mediaString = "";

// Если Web-браузер - Internet Explorer

if(navigator.userAgent.indexOf("MSIE")!= -1)

{

// Получение имени текущего элемента

elementName =

styleSheetElement.owningElement.nodeName;

// Преобразование значения свойства

// media в массив

mediaArray =

styleSheetElement.media.split(",");

// Вывод элементов массива mediaArray

// в виде строки

for(j = 0; j < mediaArray.length; j++)

mediaString += (j+1) + ". " +

mediaArray[j] + " ";

}

else

{

// Получение имени текущего элемента

elementName =

styleSheetElement.ownerNode.nodeName;

// Вывод элементов коллекции MediaList

// в виде строки

for(j = 0;

j < styleSheetElement.media.length; j++)

mediaString += (j+1) + ". " +

styleSheetElement.media.item(j) + " ";

}

// Вывод значений свойств объекта styleSheet

alert("elementName='" + elementName + "'" +

"\ndisabled='" + styleSheetElement.disabled +

"'" + "\ntype='" + styleSheetElement.type + "'" +

"\nhref='" + styleSheetElement.href + "'" +

"\nmedia='" + mediaString + "'" +

"\ntitle='" + styleSheetElement.title + "'");

}

}

При вызове этой функции для элементов link и style в Internet Explorer будут выведены следующие сообщения:

Аналогичным образом будут выглядеть сообщения в Firefox и Opera, однако в Safari будут выведены следующие сообщения:

Наряду с заданием таблиц в документе HTML с использованием элементов link и style можно, используя средства DOM, динамически создавать таблицы стилей в сценариях JavaScript. Однако следует иметь в виду, что операция создания таблицы стилей по-разному выполняется в Internet Explorer и в остальных Web-браузерах (Firefox, Opera и Safari).

В Web-браузере Internet Explorer таблица стилей создается с помощью метода

createStyleSheet(URL, индекс)

интерфейса Document.

Если первый параметр URL задает ссылку на внешнюю таблицу стилей, то создается элемент link со значением атрибута href, равным значению URL. В противном случае, а также, если первый параметр не задан, создается элемент style.

Второй параметр индекс задает индекс в последовательности элементов style и link, по которому будет вставлена создаваемая таблица стилей. Если второй параметр не указан, вставляемый элемент style или link станет последним в последовательности.

В Web-браузерах Firefox, Opera и Safari таблица стилей создается с помощью метода

createElement(имя-тега)

интерфейса Document (см. 4.5.3.5). В качестве имени-тега задаются значения "style" или "link".

Для задания атрибутов, изменения значений атрибутов и удаления атрибутов как созданных так и существующих элементов во всех Web-браузерах необходимо использовать методы setAttribute() и removeAttribute()(см. 4.5.3.8).

Существующие в документе HTML таблицы стилей, заданные с помощью элемента style, могут конфликтовать с создаваемыми внутренними таблицами. Поэтому документ должен содержать либо только существующие внутренние (статические) таблицы стилей, либо только создаваемые внутренние (динамические) таблицы стилей. Внешние таблицы стилей в документе могут быть как статическими, так и динамическими. В Safari для создаваемых таблиц стилей коллекция styleSheets будет содержать все созданные элементы style и link.

Пример 4.5.40. Создание таблиц стилей:

Для текста документа HTML в примере 4.5.39 вместо заданных в заголовке элементов link и style создадим новые таблицы стилей с использованием средств DOM и сценариев JavaScript.

Следующий фрагмент сценария создает элемент link со ссылкой на внешнюю таблицу стилей cssExt.css:

// Если Web-браузер - Internet Explorer

if(navigator.userAgent.indexOf("MSIE")!= -1)

// Создание элемента link как первого

// элемента коллекции styleSheets

newExtleSheet =

document.createStyleSheet(sheetName, 0);

else

{

// Получение элемента head

headElement =

document.getElementsByTagName("head")[0];

// Создание новой ссылки

// на внешнюю таблицу (элемента link)

newExtStyleSheet = document.createElement("link");

// Установка атрибута href для элемента link

newExtStyleSheet.setAttribute("href", sheetName);

// Установка атрибута rel для элемента link

newExtStyleSheet.setAttribute("rel", "stylesheet");

// Добавление элемента link как первого

// дочернего узла элемента head

headElement.insertBefore(newExtStyleSheet,

headElement.childNodes[0]);

}

// Получение элемента link

newExtStyleSheet =

document.getElementsByTagName("link")[0];

// Установка атрибута type для элемента link

newExtStyleSheet.setAttribute("type", "text/css");

// Установка атрибута media для элемента link

newExtStyleSheet.setAttribute("media", "screen,print");

// Установка атрибута title для элемента link

newExtStyleSheet.setAttribute("title",

"Новая таблица стилей - 1");

Этот фрагмент сценария создает внутреннюю таблицу стилей (элемент style):

// Если Web-браузер - Internet Explorer

if(navigator.userAgent.indexOf("MSIE")!= -1)

// Создание таблицы стилей

newIntStyleSheet = document.createStyleSheet("",-1);

else

{

// Получение элемента head

headElement = document.getElementsByTagName("head")[0];

// Создание новой таблицы (элемента style)

newIntStyleSheet = document.createElement("style");

// Добавление новой таблицы стилей

// к дочерним узлам элемента head

headElement.appendChild(newIntStyleSheet);

}

// Получение элемента style

newIntStyleSheet =

document.getElementsByTagName("style")[0];

// Установка атрибута type для элемента style

newIntStyleSheet.setAttribute("type", "text/css");

// Установка атрибута media для элемента style

newIntStyleSheet.setAttribute("media", "screen");

// Установка атрибута title для элемента style

newIntStyleSheet.setAttribute("title",

"Новая таблица стилей - 2");

// Включение внутренней таблицы

newIntStyleSheet.disabled = false;

В результате выполнения этих фрагментов вывод Web-страницы из примера 4.5.39 будет иметь следующий вид:

(в Internet Explorer, аналогично в Firefox, Opera и Safari)

При использовании определенной в примере 4.5.39 функции вывод количества и свойств созданных таблиц стилей будет иметь следующий вид:

Работа с содержимым таблиц стилей, как и создание таблиц, по-разному организована в Internet Explorer и в остальных Web-браузерах, поддерживающих спецификацию DOM Level 2 Style: Firefox, Opera и Safari.

В Internet Explorer для объекта styleSheet заданы следующие коллекции:

· rules – содержит правила стилей таблицы;

· imports – содержит правила @import;

· pages – содержит правила @page;

Коллекция rules имеет свойство length, содержащее количество элементов в коллекции (свойство доступно как для чтения, так и модификации). Элементами коллекции являются объекты rule (правило стилей).

Объект rule имеет два свойства:

· selectorText – значение селектора правила (только для чтения);

· объект style – содержит набор стилей правила.

Операции с объектом style в Internet Explorer выполняются теми же способами, что и для атрибута style (см. 4.5.8.1).

Элементами коллекции imports являются правила @import для стилей, импортируемых в таблицу (см. 4.3.12.3). Свойством коллекции является переменная length, содержащая количество элементов в коллекции (свойство доступно как для чтения, так и модификации). Доступ к элементу коллекции выполняется с помощью выражения imports(индекс).

Коллекция pages содержит объекты page, содержащие правило @page (см. 4.3.26.2). Общее количество элементов в коллекции задается свойством length, доступным только для чтения.

Объект page имеет два свойства (только для чтения):

· pseudoClass – содержит наименование псевдокласса (:first,:left или:right);

· selector – содержит список стилей для заданного псевдокласса.

Операции с объектами коллекций rules, imports и pages выполняются с помощью следующих методов объекта styleSheet:

· addRule(селектор, список-свойств, индекс) – добавление элемента с заданным индексом в коллекцию rules (элемент содержит правило стилей с заданным селектором и заданным списком-свойств) (если индекс не задан, элемент добавляется после последнего элемента коллекции);

· removeRule(индекс) – удаление элемента с заданным индексом из коллекции rules (если индекс не задан, удаляется первый элемент коллекции);

· addImport(URL, индекс) – добавление элемента с заданным индексом в коллекцию imports (элемент содержит URL импортируемой таблицы стилей) (если индекс не задан, элемент добавляется после последнего элемента коллекции);

· removeImport(индекс) – удаление элемента с заданным индексом из коллекции imports;

· addPageRule(псевдокласс, список-свойств, индекс) – добавление объекта page с заданным индексом в коллекцию pages (элемент содержит правило стилей для заданного псевдокласса с заданным списком-свойств) (если индекс не задан, объект добавляется после последнего элемента коллекции).

В спецификации DOM Level 2 Style для объекта styleSheet задана коллекция cssRules, содержащая все правила данной таблицы стилей (объекты cssRule). Количество объектов в коллекции cssRules можно определить с помощь свойства length.

Для коллекции cssRules также определены два метода:

· insertRule(правило, индекс) – для вставки нового правила (объекта cssRule) перед правилом с указанным индексом;

· deleteRule(индекс)– для удаления правила (объекта cssRule) с указанным индексом.

Параметр правило в функции insertRule() должен содержать либо правило стилей (селектор и перечень стилей в фигурных скобках), либо правила с префиксом "@" (наименование правила, например @import, и параметры правила).

Перед началом добавления правил в созданную таблицу, она должна быть включена (свойство disabled должно быть установлено в false).

Объект cssRule, в свою очередь, имеет следующие свойства (доступны только для чтения):

· type – тип правила;

· cssText – строка, содержащая правило;

· parentStyleSheet – таблица стилей (объект styleSheet), содержащая данное правило.

Значение свойства type – целое число (при операциях сравнения можно использовать его символьный эквивалент). Это свойство может принимать следующие значения:

· UNKNOWN_RULE (0) – неизвестное правило;

· STYLE_RULE (1) – правило стилей (селектор и набор свойств);

· CHARSET_RULE (2) – правило @charset;

· IMPORT_RULE (3) – правило @import;

· MEDIA_RULE (4) – правило @media;

· FONT_FACE_RULE (5) – правило @font-face (в Web-браузерах Firefox, Opera и Safari не поддерживается);

· PAGE_RULE (6) – правило @page.

Дальнейшие операции с правилами зависят от типа правила.

Для объекта cssRule – правила стилей определены два свойства:

· selectorText – строка, содержащая селекторы;

· style – объект, содержащий список объявлений стилей.

Объект style, в свою очередь, содержит следующие свойства:

· cssText – строковое представление объявлений стилей;

· length – количество свойств в объявлении;

· parentRule – родительское правило для данного списка.

Операции с объектом style в DOM Level 2 выполняются теми же способами, что и для атрибута style (см. 4.5.8.1).

Для объекта cssRule – правила @charset (см. 4.3.12.2) определено свойство encoding, задающее кодировку таблицы, например "UTF-8" или "Windows-1251". Это свойство доступно и для чтения и для модификации.

Для объекта cssRule – правила @import (см. 4.3.12.3) определены три свойства (доступны только для чтения):

· href – URL в правиле @import;

· media – список имен устройств в правиле @import (коллекция MediaList – см. 4.5.8.2.1);

· styleSheet – таблица стилей (объект styleSheet), импортируемая в правиле @import (в Safari свойство не поддерживается и его значение равно null).

Для объекта cssRule – правила @media (см. 4.3.26.1) определены два свойства (доступны только для чтения):

· cssRules – коллекция правил стилей (объектов cssRule), которые определены для данного правила @media;

· media – список имен устройств, на которые распространяются действия правила @media (коллекция MediaList – см. 4.5.8.2.1).

Для правила @media также определены два метода:

· insertRule(правило, индекс) – для вставки нового правила (объекта cssRule) перед правилом с указанным индексом;

· deleteRule(индекс)– для удаления правила (объекта cssRule) с указанным индексом.

Для объекта cssRule – правила @page (см. 4.3.26.2) определены два свойства:

· selectorText – селектор правила @page (свойство доступно как для чтения, так и модификации);

· style – блок описания правила @page (только для чтения).

Пример 4.5.41. Модификация таблиц стилей:

В примере 4.5.40 были созданы две таблицы стилей: внешняя таблица (элемент link) из файла cssExt.css и внутренняя таблица стилей (элемент style), являющиеся элементами коллекции с индексами соответственно 0 и 1. Внутренняя таблица стилей пока не содержит никаких правил.

Добавим во внутреннюю таблицу следующие компоненты:

· импортируемую таблицу стилей cssImp.css с помощью правила @import;

· правило стилей для элемента h2;

· правило стилей для элемента h3.

Эти добавления выполняются с помощью следующего фрагмента сценария:

// Получение элемента коллекции

// для внутренней таблицы (элемента style)

intStyleSheet = document.styleSheets[1];

// Если Web-браузер - Internet Explorer

if(navigator.userAgent.indexOf("MSIE")!= -1)

{

// Добавление импортируемой таблицы стилей

intStyleSheet.addImport("styles/cssImp.css");

// Добавление во внутреннюю таблицу стилей

// первого правила стилей для заголовка h2

intStyleSheet.addRule("h2",

"font-weight:bold;color:red");

// Добавление во внутреннюю таблицу стилей

// второго правила стилей для заголовка h3

intStyleSheet.addRule("h3","color:fuchsia");

// Установка для первого правила шрифта Georgia

intStyleSheet.rules(0).style.fontFamily = "Georgia";

// Установка для второго правила шрифта Verdana

intStyleSheet.rules(1).style.fontFamily = "Verdana";

}

else

{

// Активизация внутренней таблицы стилей

intStyleSheet.disabled = false;

//Добавление импортируемой таблицы стилей

intStyleSheet.insertRule(

"@import url(styles/cssImp.css);",0);

// Добавление во внутреннюю таблицу стилей

// первого правила стилей для заголовка h2

intStyleSheet.insertRule(

"h2 {font-weight:bold;color:red}",1);

// Добавление во внутреннюю таблицу стилей

// второго правила стилей для заголовка h3

intStyleSheet.insertRule("h3 {color:fuchsia}",2);

// Установка для первого правила шрифта Georgia

intStyleSheet.cssRules[1].style.fontFamily = "Georgia";

// Установка для второго правила шрифта Verdana

intStyleSheet.cssRules[2].style.fontFamily = "Verdana";

}

После этих добавлений вывод Web-страницы примет следующий вид:

Изменение цвета английских слов (для класса en) во внешней таблице стилей выполняется с помощью следующего фрагмента сценария:

// Получение элемента коллекции

// для внешней таблицы (элемента link)

extStyleSheet = document.styleSheets[0];

// Если Web-браузер - Internet Explorer

if(navigator.userAgent.indexOf("MSIE")!= -1)

// Изменение цвета текста для английских слов

extStyleSheet.rules(2).style.color = "purple";

else

// Изменение цвета текста для английских слов

extStyleSheet.cssRules[2].style.color = "purple";

Вывод Web-страницы изменится следующим образом:

После удаления свойства color для элемента p и правила для элемента h2 во внешней таблице стилей с помощью следующего фрагмента сценария:

// Получение элемента коллекции

// для внешней таблицы (элемента link)

extStyleSheet = document.styleSheets[0];

// Если Web-браузер - Internet Explorer

if(navigator.userAgent.indexOf("MSIE")!= -1)

{

// Удаление цвета текста для абзацев

extStyleSheet.rules(1).style.color = "";

// Удаление первого правила из внешней таблицы

extStyleSheet.removeRule(0);

}

else

{

// Удаление цвета текста для абзацев

extStyleSheet.cssRules[1].style.color = "";

// Удаление первого правила из внешней таблицы

extStyleSheet.deleteRule(0);

}

В результате Web-страница примет окончательный вид:

Получить значения цвета для элементов span класса en, h3 и span класса select можно с помощью следующего фрагмента сценария:

// Получение элемента коллекции

// для внешней таблицы (элемента link)

extStyleSheet = document.styleSheets[0];

// Получение элемента коллекции

// для внутренней таблицы (элемента style)

intStyleSheet = document.styleSheets[1];

// Если Web-браузер - Internet Explorer

if(navigator.userAgent.indexOf("MSIE")!= -1)

{

// Вывод цвета текста в абзацах

// (внешняя таблица стилей)

alert("Английские слова:\n selector='" +

extStyleSheet.rules(1).selectorText +

"'\n color='" +

extStyleSheet.rules(1).style.color + "'");

// Вывод цвета текста в заголовке h2

// (внутренняя таблица стилей)

alert("Заголовок второго уровня:\n selector='" +

intStyleSheet.rules(0).selectorText +

"'\n color='" +

intStyleSheet.rules(0).style.color + "'");

// Вывод цвета выделенного текста

// (импортируемая таблица стилей)

alert("Выделенный текст:\n selector='" +

intStyleSheet.imports(0).rules(0).selectorText +

"'\n color='" +

intStyleSheet.imports(0).rules(0).style.color + "'");

}

else

{

// Вывод цвета текста английских слов

// (внешняя таблица стилей)

alert("Английские слова:\n selector='" +

extStyleSheet.cssRules[1].selectorText +

"'\n color='" +

extStyleSheet.cssRules[1].style.color + "'");

// Вывод цвета текста в заголовке h2

// (внутренняя таблица стилей)

alert("Заголовок второго уровня:\n selector='" +

intStyleSheet.cssRules[1].selectorText +

"'\n color='" +

intStyleSheet.cssRules[1].style.color + "'");

// Если Web-браузер - не Safari

if(navigator.userAgent.indexOf("Safari") == -1)

{

// Получение импортируемой таблицы

// (объекта styleSheet)

impStyleSheet =

intStyleSheet.cssRules[0].styleSheet;

// Вывод цвета выделенного текста

alert("Выделенный текст:\n selector='" +

impStyleSheet.cssRules[0].selectorText +

"'\n color='" +

impStyleSheet.cssRules[0].style.color + "'");

}

}

В результате выполнения этого фрагмента сценария будут выведены следующие сообщения:

Последнее сообщение не будет выведено в Safari, поскольку в нем не определен объект StyleSheet для импортируемой таблицы стилей.