16.3.2. Работа со свойствами стилей

При работе со свойствами стилей объекта CSS2Properties помните, что все значе

ния должны быть указаны в виде строк. В таблице стилей или атрибуте style

можно написать:

position: absolute; fontfamily: sansserif; backgroundcolor: #ffffff;

Чтобы сделать то же самое для элемента e в JavaScript, необходимо поместить

все эти значения в кавычки:

e.style.position = "absolute";

e.style.fontFamily = "sansserif";

e.style.backgroundColor = "#ffffff";

Обратите внимание, что точки с запятыми остаются вне строк. Это обычные точ

ки с запятой, употребляемые в синтаксисе языка JavaScript. Точки с запятой,

используемые в таблицах CSSстилей, не нужны в строковых значениях, уста

навливаемых с помощью JavaScript.

Кроме того, помните, что во всех свойствах позиционирования должны быть

указаны единицы измерения. Следовательно, нельзя устанавливать свойство

left подобным образом:

e.style.left = 300; // Неправильно: это число, а не строка

e.style.left = "300"; // Неправильно: отсутствуют единицы измерения

Единицы измерения обязательны при установке свойств стиля в JavaScript –

так же, как при установке атрибутов стиля в таблицах стилей. Далее приво

дится правильный способ установки значения свойства left элемента e равным

300 Пикселов:

e.style.left = "300px";

Чтобы установить свойство left равным вычисляемому значению, обязательно

добавьте единицы измерения в конце вычислений:

e.style.left = (x0 + left_margin + left_border + left_padding) + "px";

Как побочный эффект добавления единиц измерения, добавление строки преоб

разует вычисленное значение из числа в строку.

Объект CSS2Properties может также использоваться для получения значений

CSSатрибутов, явно установленных в атрибуте style элемента, или для чтения

любых встроенных значений стилей, ранее установленных JavaScriptкодом.

Однако и здесь необходимо помнить, что значения, полученные из этих свойств,

представляют собой строки, а не числа, поэтому следующий код (предполагаю

щий, что для элемента e с помощью встраиваемых стилей установлены поля) не

делает того, что от него, возможно, ожидалось:

var totalMarginWidth = e.style.marginLeft + e.style.marginRight;

А вот такой код будет работать правильно:

var totalMarginWidth = parseInt(e.style.marginLeft) +

parseInt(e.style.marginRight);

Это выражение просто отбрасывает спецификации единиц измерения, возвра

щаемые в конце обеих строк. В нем предполагается, что свойства marginLeft и mar16.3. Использование стилей в сценариях 389

ginRight заданы с одинаковыми единицами измерения. Если во встроенных сти

лях в качестве единиц измерения указаны исключительно пикселы, то, как пра

вило, можно обойтись простым отбрасыванием единиц измерения, как в данном

примере.

Вспомните, что некоторые CSSатрибуты, например margin, представляют собой

сокращения от других свойств, например margintop, marginright, marginbottom

и marginleft. Объект CSS2Properties имеет свойства, соответствующие этим сокра

щенным атрибутам. Так, можно установить свойство margin следующим образом:

e.style.margin = topMargin + "px " + rightMargin + "px " +

bottomMargin + "px " + leftMargin + "px";

Хотя возможно, комуто будет проще установить четыре свойства полей по от

дельности:

e.style.marginTop = topMargin + "px";

e.style.marginRight = rightMargin + "px";

e.style.marginBottom = bottomMargin + "px";

e.style.marginLeft = leftMargin + "px";

Можно также получить значения сокращенных свойств, но это редко имеет

смысл, поскольку обычно в этом случае приходится разбивать полученное зна

чение на отдельные компоненты. Как правило, это сделать сложно, в то время

как получить свойствакомпоненты по отдельности намного проще.

И наконец, позвольте мне снова подчеркнуть, что когда вы получаете объект

CSS2Properties через свойство style объекта HTMLElement, свойства этого объекта

представляют значения встроенных атрибутов стилей элемента. Другими слова

ми, установка одного из этих свойств эквивалентна установке CSSатрибута в ат

рибуте style элемента – она влияет только на данный элемент и имеет приоритет

над конфликтующими установками стилей из других источников в CSSкаска

де. Именно такое точное управление отдельными элементами и требуется при

создании DHTMLэффектов с помощью JavaScript.

Однако когда мы читаем значения этих свойств в CSS2Properties, они возвращают

осмысленные значения, только если были ранее установлены нашим JavaScript

кодом или если HTMLэлемент, с которым мы работаем, имеет встроенный атри

бут style, установивший нужное свойство. Например, документ может включать

таблицу стилей, устанавливающую левое поле для всех абзацев равным 30 пик

селов, но если прочитать свойство leftMargin одного из абзацных элементов, бу

дет получена пустая строка, если только этот абзац не имеет атрибута style, пе

реопределяющего значение, установленное таблицей стилей.

Поэтому несмотря на то, что объект CSS2Properties может использоваться для ус

тановки стилей, переопределяющих другие стили, он не позволяет запросить

CSSкаскад и определить полный набор стилей, применяемых к данному элемен

ту. В разделе 16.4 мы кратко рассмотрим метод getComputedStyle() и его альтерна

тиву в IE – свойство currentStyle, предоставляющие именно такую возможность.

17.1. Базовая обработка событий

В рассмотренных ранее примерах обработчики событий записывались в виде

строк JavaScriptкода, выступающих в качестве значений определенных HTML

атрибутов, таких как onclick. Это основа исходной модели обработки событий,

но есть некоторые дополнительные нюансы, требующие понимания и рассмот

ренные в следующих разделах.

17.1.1. События и типы событий

Различные типы происшествий генерируют различные типы событий. Наводя

мышь на гиперссылку и щелкая кнопкой мыши, пользователь вызывает собы

1 Броузер Netscape 4 также имел собственную, отличную от других и несовмести

мую модель обработки событий. Этот броузер в основном уже вышел из употреб

ления, по’тому его модель обработки событий в этой книге не рассматривается.

2 Хотя к моменту написания этих строк броузер IE 7 уже находился в стадии разра

ботки, у автора нет никакой информации о том, будет ли он поддерживать стан

дартную модель обработки событий.17.1. Базовая обработка событий 405

тия разных типов. Даже одно и то же происшествие может возбуждать различ

ные типы событий в зависимости от контекста, например, когда пользователь

щелкает на кнопке Submit, возникает событие, отличное от события, возникаю

щего при щелчке на кнопке Reset в форме.

В исходной модели обработки событий событие – это внутренняя абстракция для

вебброузера, и JavaScriptкод не может непосредственно манипулировать собы

тием. Говоря о типе события в исходной модели обработки событий, мы на самом

деле имеем в виду имя обработчика, вызываемого в ответ на событие. В этой мо

дели код обработки событий задается с помощью атрибутов HTMLэлементов

(и соответствующих свойств связанных с ними JavaScriptобъектов). Следова

тельно, если приложению требуется знать, что пользователь навел мышь на опре

деленную гиперссылку, то используется атрибут onmouseover тега <a>, определяю

щего эту гиперссылку. А если приложению требуется знать, что пользователь

щелкнул на кнопке Submit, используется атрибут onclick тега <input>, определяю

щего кнопку, или атрибут onsubmit элемента <form>, содержащего эту кнопку.

Имеется довольно много различных атрибутов обработчиков событий, которые

можно использовать в исходной модели обработки событий. Они перечислены

в табл. 17.1, где также указано, когда вызываются эти обработчики событий

и какие HTMLэлементы поддерживают атрибуты обработчиков.

В процессе развития клиентского JavaScriptпрограммирования развивалась

и поддерживаемая им модель обработки событий. В каждую новую версию бро

узера добавлялись новые атрибуты обработчиков событий. И наконец, специфи

кация HTML 4 закрепила стандартный набор атрибутов обработчиков событий

для HTMLтегов. В третьем столбце табл. 17.1 указано, какие HTMLэлементы

поддерживают каждый из атрибутов обработчиков событий. Для событий мыши

в третьей колонке указывается, что атрибут обработчика события поддерживает

большинство элементов. HTMLэлементы, которые не поддерживают данный

тип событий, обычно размещаются в разделе <head> документа или не имеют гра

фического представления. К элементам, не поддерживающим практически уни

версальные атрибуты обработчиков событий мыши, относятся <applet>, <bdo>,

<br>, <font>, <frame>, <frameset>, <head>, <html>, <iframe>, <isindex>, <meta> и <style>.

Таблица 17.1. Обработчики событий и поддерживающие их HTML'элементы

Обработчик Условия вызова Поддержка

onabort Прерывание загрузки изображения <img>

onblur Элемент теряет фокус ввода <button>, <input>, <label>,

<select>, <textarea>, <body>

onchange Элемент <select> или другой элемент поте

рял фокус и его значение с момента получе

ния фокуса изменилось

<input>, <select>, <tex

tarea>

onclick Была нажата и отпущена кнопка мыши;

следует за событием mouseup. Возвращает

false для отмены действия по умолчанию

(т. е. перехода по ссылке, очистки формы,

передачи данных)

Большинство элементов

ondblclick Двойной щелчок Большинство элементов406 Глава 17. События и обработка событий

Таблица 17.1 (продолжение)