Чтение онлайн

ЖАНРЫ

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++);

}

}

}

}

17

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

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

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

Тип события– это строка, определяющая тип происшествия. Тип «mousemove», например, означает, что пользователь переместил указатель мыши. Тип «keydown» означает, что была нажата клавиша на клавиатуре. А тип «load» означает, что завершилась загрузка документа (или какого-то другого ресурса) из сети. Поскольку тип события - это просто строка, его иногда называют именем события. И действительно, мы будем использовать эти имена для идентификации типов событий, о которых будет идти речь. Современные веб-броузеры поддерживают множество типов событий, краткий обзор которых приводится в разделе 17.1.

Поделиться с друзьями: