JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

JavaScript. Подробное руководство, 6-е издание

на обложку

Флэнаган Дэвид

Шрифт:

// в точности будет иметь вид "h1"

if (selector == "hi") {

if (ss.insertRule)

ss.insertRule("h2 {" +ruleText+ "}", rules.length);

else if (ss.addRule) ss.addRule("h2", ruleText, rules.length);

}

// Если правило устанавливает свойство text-decoration, удалить его.

if (rule.style.textDecoration) {

if (ss.deleteRule) ss.deleteRule(i);

else

if (ss.removeRule) ss.removeRule(i);

i--; // Скорректировать переменную цикла, поскольку прежнее правило с

//индексом i+1 теперь стало правилом с индексом і

}

16.6.3. Создание новых таблиц стилей

Наконец, имеется возможность создавать совершенно новые таблицы стилей и добавлять их в документ. В большинстве броузеров эта операция выполняется с помощью стандартных приемов, реализованных в модели DOM: создается новый элемент

<style>

и вставляется в документ в раздел

<head>,

затем с помощью свойства

innerHTML

добавляется содержимое таблицы стилей. Однако в IE8 и в более ранних версиях новый объект

CSSStyleSheet

необходимо создавать с помощью нестандартного метода

document.createStyleSheet

, а текст таблицы стилей добавлять с помощью свойства

cssText

. Пример 16.6 демонстрирует создание новых таблиц:

Пример 16.6. Создание новой таблицы стилей

// Добавляет таблицу стилей в документ и заполняет ее указанными стилями.

// Аргумент styles может быть строкой или объектом. Если это строка.

// она интерпретируется как текст таблицы стилей. Если это объект, то каждое

// его свойство должно определять правило стиля, добавляемое в таблицу.

// Именами свойств являются селекторы, а их значениями - соответствующие стили

function addStyles(styles) {

// Сначала необходимо создать новую таблицу стилей

var styleElt, styleSheet;

if (document.createStyleSheet) { //Если определен IE API, использовать его

styleSheet = document.createStyleSheet;

}

else {

var head = document.getElementsByTagName("head")[0]

styleElt = document.createElement("style"); // Новый элемент <style>

head.appendChild(styleElt); // Вставить в <head>

// Теперь новая таблица находится в конце массива

styleSheet = document.styleSheets[document.styleSheets.length-1]

}

// Вставить стили в таблицу

if (typeof styles === "string") {

// Аргумент содержит текстовое определение таблицы стилей

if (styleElt)

styleElt.innerHTML = styles;

else

styleSheet.cssText = styles; // IE API

}

else {

// Аргумент - объект с правилами для вставки

var і = 0;

for(selector in styles) {

if (styleSheet.insertRule) {

var rule = selector + {" + styles[selector] + "}";

styleSheet.insertRule(rule, i++);

}

else {

styleSheet.addRule(selector, styles[selector], i++);

}

Обработка событий

Клиентские программы на языке JavaScript основаны на модели программирования, когда выполнение программы управляется событиями (представленной в разделе 13.3.2). При таком стиле программирования веб-броузер генерирует событие, когда с документом или некоторым его элементом что-то происходит. Например, веб-броузер генерирует событие, когда завершает загрузку документа, когда пользователь наводит указатель мыши на гиперссылку или нажимает клавишу на клавиатуре. Если JavaScript-приложение интересует определенный тип события для определенного элемента документа, оно может зарегистрировать одну или более функций, которая будет вызываться при возникновении этого события. Имейте в виду, что это не является уникальной особенностью веб-программирования: все приложения с графическим интерфейсом пользователя действуют именно таким образом - они постоянно ожидают, пока что-то произойдет (т. е. ждут появления событий), и откликаются на происходящее.

Обратите внимание, что слово событие не является техническим термином, требующим строгого определения. События - это просто некоторые происшествия, о которых броузер извещает программу. События не являются объектами языка JavaScript и никак не описываются в программном коде программы. Однако существует множество объектов, имеющих отношение к событиям, использующихся в программном коде, и эти объекты требуют дополнительного технического описания. Поэтому мы начнем эту главу с некоторых важных определений.