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

Флэнаган Дэвид
Шрифт:

}

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 и никак не описываются в программном коде программы. Однако существует множество объектов, имеющих отношение к событиям, использующихся в программном коде, и эти объекты требуют дополнительного технического описания. Поэтому мы начнем эту главу с некоторых важных определений.