www.wmaster.ru
Wmaster.ru

На главную

Введение в дизайн

СТАТЬИ

Хостинг

DOCS

Коллекция шрифтов

Скрипты

Секреты мастеров

Продвижение сайта

Soft

Журнал Wmaster

Электронные журналы

ФоруМ

web-mastering
HTML
Programming
HTML-редакторы
Учебник по SEO
Apache
MySQL
XML/WML
Flash
Photoshop
.htaccess
Всё для форумов
Clipart
3DSMax
SSI
CSS
Технология раскрутки
Авторское право
Кодовые таблицы
Важное

Windows

Учебник по Adobe GoLive6

ДИНАМИЧЕСКИЙ HTML (Часть 2)

Свойства и методы элементов Web-страниц
Применение стилей
Позиционирование элементов Web-страницы
Обработка форм
Графические фильтры

 

Свойства и методы элементов Web-страниц

В предыдущем разделе главы мы узнали, что каждый элемент Web-страницы, объявляемый при помощи того или иного тега, обладает собственным набором событий. Наличие событий свойственно, как мы знаем, объектам DHTML. А раз наши элементы являются объектами, то у них должны быть свои свойства и методы. И это действительно так.
Основные свойства и методы мы рассмотрели в этой главе несколько ранее. А в данном разделе мы узнаем, какие именно свойства и методы специфичны для каждого конкретного элемента Web-страницы. В табл. 7.4 приведен список методов для каждого элемента.

Таблица 7.4. Теги и методы

Тег Гиперссылка Список методов
<а>
Гиперссылка
blur, click, contains, focus, getAttribute, insertAd j acentHTML, insert Adjacent Text, remove At tribute, scrollIntoView, setAttribute
<address>
Специализированное форматирование текста
click, contains, getAttribute, insertAd j acentHTML, insert Ad j a cent Text, removeAt tribute, scrollIntoView, setAttribute
<applet>
Внедряет в сост в Web-страницы Java-апплет
blur, click, contains, focus, getAttribute, insertAd j acentHTML, insertAdj acentText, removeAt tribute, scrollIntoView, setAttribute
<area>
Создает активную область-гиперссылку в сегментированной графике
blur, click, contains, focus, getAttribute, insertAdj acentHTML, insertAdj acentText, removeAt tribute, scrollIntoView, setAttribute
<b>
Выделяет текст полужирным шрифтом
click, contains, getAttribute, insertAdj acentHTML, insertAdj acentText, removeAt tribute, scrollIntoView, setAttribute
<base>
Устанавливает URL основного документа
contains, getAttribute, removeAttribute, setAttribute
<basefont>
Задает шрифт, используемый по умолчанию
contains, getAttribute, removeAttribute, setAttribute
<bgsound>
Задает фоновый звук Web-страницы
contains, getAttribute, removeAttribute, setAttribute
<big>
Увеличивает размер шрифта на единицу
click, contains, getAttribute, insertAdj acentHTML, insertAdj acentText, removeAttribute, scrollIntoView, setAttribute
<tfoot>
Создает нижнюю часть таблицы
click, contains, getAttribute, removeAt tribute, scrollIntoView, setAttribute
<th>
Объявляет строку заголовка таблицы
click, contains, getAttribute, removeAt tribute, scrollIntoView, setAttribute
<thead>
Создает область заголовка таблицы
click, contains, getAttribute, removeAt tribute, scrollIntoView, setAttribute
<title>
Применяется для создания заголовка HTML- документа
contains, getAttribute, removeAttribute, setAttribute
<tr>
Объявляет строку таблицы
blur, click, contains, focus, getAttribute, removeAttribute, scrollIntoView, setAttribute
<tt>
Устанавливает специализированное шрифтовое оформление
click, contains, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute
<u>
Отображает подчеркнутый текст
click, contains, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute
<ul>
Создает маркированный список
click, contains, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute
<var>
Устанавливает специализированное форматирование текста
click, contains, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute
<blockquote>
Специализированное форматирование текста
click, contains, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute
<body>
Определяет содержательную часть Web-страницы
blur, click, contains, focus, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute
<br>
Создает принудительный разрыв строки
contains, getAttribute,
insertAd j acentHTML, insert Ad jacentText, removeAttribute, setAttribute
<button>
Создает кнопку
blur, click, contains, createtextRange, focus, getAttribute, insertAdj acentHTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute
<caption>
Создает заголовок таблицы
blur, click, contains, focus, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute
<center>
Центрирует блок содержимого
click, contains, getAttribute, insertAdj acentHTML, insertAdj acentText, removeAttribute, scrollIntoView, setAttribute
<cite>
Специализированное форматирование текста
click, contains, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute
<code>
Специализированное форматирование текста
*
click, contains, getAttribute, insertAdj acentHTML, insertAdj acentText, removeAttribute, scrollIntoView, setAttribute
<col>
Устанавливает определение столбцов таблицы
contains, getAttribute, removeAttribute, setAttribute
<colgroup>
Создает группу столбцов
contains, getAttribute, removeAttribute, setAttribute
<dd>
Элемент списка
click, contains, getAttribute, insert Adjacent HTML, insert Adjacent Text, removeAttribute, scrollIntoView, setAttribute
<dfn>
Специализированное форматирование текста
click, contains, getAttribute, insertAdjacentHTML, insert Adjacent Text, removeAttribute, scrollIntoView, setAttribute
<div>
Группировка элементов содержимого Web-страницы
blur, click, contains, focus, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView, setAttribute
<dl>
Создание списка
click, contains, getAttribute, insertAd j acentHTML, insertAdjacentText,' removeAttribute, scrollIntoView, setAttribute
<dt>
Создание элемента списка
click, contains, getAttribute, insertAdj acentHTML, insertAdjacentText, removeAttribute, scrollIntoView, setAttribute
<em>
Специализированное форматирование текста
click, contains, getAttribute, insertAdj acentHTML, insertAdjacentText, removeAttribute, scrollIntoView, setAttribute
<embed>
Внедрение в состав содержимого Web-страницы объектов различных типов
blur, contains, focus, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView, setAttribute
<font>
Определение шрифта для отображения текста
click, contains, getAttribute, insertAdj acentHTML, insertAdjacentText, removeAttribute, scrollIntoView, setAttribute
<kbd>
Специализированное форматирование текста
click, contains, getAttribute, insert Adjacent HTML, insert Ad j a cent Text, removeAt tribute, scrollIntoView, setAttribute
<label>
Создает текстовую метку для некоторых органов ввода информации
click, contains, getAttribute, insertAdjacentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute
<li>
Создает элемент списка
click, contains, getAttribute, insertAdjacentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute
<link>
Объявляет связь между различными HTML-документами
contains, getAttribute, removeAttribute, setAttribute
<listing>
Специализированное форматирование текста
click, contains, getAttribute, insertAdjacentHTML, insertAd jacentText, removeAttribute, scrollIntoView, setAttribute
<map>
Создает карту сегментированной графики
click, contains, getAttribute, removeAttribute, setAttribute
<meta>
Применяется для установки meta-переменных HTML-документа
contains, getAttribute, removeAttribute, setAttribute
<object>
Внедряет какой-либо объект в HTML- документ
blur, click, contains, focus, getAttribute, insertAdj acentHTML, insertAd jacentText, removeAttribute, scrollIntoView, setAttribute
<ol>
Создает нумерованный список
click, contains, getAttribute, insertAdj acentHTML, insertAd jacentText, removeAttribute, scrollIntoView, setAttribute
<option>
Создает элемент выпадающего списка
contains, getAttribute, removeAttribute, scrollIntoView, setAttribute
<р>
Задает текстовый абзац
click, contains, getAttribute, insertAd j acentHTML, insertAd j acentText, removeAt tribute, scrollIntoView, setAttribute
<plaintext>
Устанавливает специализированное форматирование текста
click, contains, getAttribute,
insertAdj acentHTML, ins ert Ad j acentText, removeAt tribute, scrollIntoView, setAttribute
<pre>
Устанавливает специализированное форматирование текста
click, contains, getAttribute, insertAdj acentHTML, insert Adjacent Text, removeAt tribute, scrollIntoView, setAttribute
<s>
Отображает зачеркнутый текст
click, contains, getAttribute, insert Adjacent HTML, insertAdj acentText, removeAt tribute, scrollIntoView, setAttribute
<script>
Объявляет программу-скрипт, включенную в состав HTML-документа
contains, getAttribute,
insertAdj acentHTML, insertAdj acentText, removeAttribute, setAttribute
<select>
Создает орган ввода данных
add, blur, click, contains, focus, getAttribute, insertAdj acentHTML, insertAdj acentText, item, remove, removeAttribute, scrollIntoView, setAttribute, tags
<small>
Уменьшает размер используемого шрифта
click, contains, getAttribute,
insertAdj acentHTML, insert Adjacent Text, removeAttribute, scrollIntoView, setAttribute
<span>
Применяется для группировки элементов Web-страницы
blur, click, contains, focus, getAttribute, insertAdj acentHTML, insertAdj acentText, removeAttribute, scrollIntoView, setAttribute
<strike>
Отображает зачеркнутый текст
click, contains, getAttribute, insert Adjacent HTML, insertAdj acentText, removeAttribute, scrollIntoView, setAttribute
<strong>
Отображает текст полужирным начертанием шрифта
click, contains, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute
<style>
Создает таблицу стилей отображения
click, contains, getAttribute, insertAdj acentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute
<sub>
Устанавливает специализированное форматирование текста
click, contains, getAttribute, insertAdj acentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute
<sup>
Устанавливает специализированное форматирование текста
click, contains, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute
<table>
Создание таблицы
blur, click, contains, focus, getAttribute, insert Adjacent HTML, insertAdjacentText, nextPage, prevPage, refresh, removeAt tribute, scrollIntoView, setAttribute
<tbody>
Обозначает основной раздел таблицы
click, contains, getAttribute, remove At tribute, scrollIntoView, setAttribute
<td>
Объявляет ячейку таблицы
blur, click, contains, focus, getAttribute, insert Adjacent HTML, insertAdjacentText, removeAt tribute, scrollIntoView, setAttribute
<textarea>
Создает многострочное поле текстового ввода
blur, click, contains, createTextrange, focus, getAttribute, insertAd j acentHTML, insertAdjacentText, removeAt tribute, scrollIntoView, select, setAttribute
<tfoot>
Создает нижнюю часть таблицы
click, contains, getAttribute, removeAt tribute, scrollIntoView, setAttribute
<th>
Объявляет строку заголовка таблицы
click, contains, getAttribute, removeAt tribute, scrollIntoView, setAttribute
<thead>
Создает область заголовка таблицы
click, contains, getAttribute, removeAt tribute, scrollIntoView, setAttribute
<title>
Применяется для создания заголовка HTML- документа
contains, getAttribute, removeAttribute, setAttribute
<tr>
Объявляет строку таблицы
blur, click, contains, focus, getAttribute, removeAttribute, scrollIntoView, setAttribute
<tt>
Устанавливает специализированное шрифтовое оформление
click, contains, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute
<u>
Отображает подчеркнутый текст
click, contains, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute
<ul>
Создает маркированный список
click, contains, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute
<var>
Устанавливает специализированное форматирование текста
click, contains, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute

В этой таблице приведены перечни методов, свойственных тем или иным элементам содержимого Web-страниц. Что означают некоторые из них, мы уже знаем, так как рассматривали их несколько ранее в данной главе. Но успел^ рассмотреть мы далеко не все, поэтому стоит обратить внимание на табл. 7.5, в которой мы соберем всю информацию о методах объектной иерархии DHTML.

Таблица 7.5. Методы в DHTML

Метод Описание
add
Добавляет элемент в список или коллекцию
addAmbient
Добавляет внешнее освещение в графический фильтр
addCone
Добавляет конический источник света в графический фильтр
addlmport
Подключает стилевую таблицу из файла, URL которого передается в метод как параметр, к текущему HTML-документу
addPoint
Добавляет точечный источник света к действующему графическому фильтру
addRule
Добавляет еще одно правило отображения к таблице стилей
alert
Отображает окно сообщения
apply
Применяет графический фильтр к объекту
assign
Загружает HTML-документ, URL которого передан методу в качестве параметра
back
Загружает предыдущий HTML-документ из списка посещенных Web-страниц
blur
Удаляет фокус ввода с объекта
changeColor
Изменяет цвет объекта
changes trength
Изменить интенсивность светового освещения
clear
Очищает содержимое объекта
clear
Удаляет все источники света из графического фильтра
clearlnterval
Сбрасывает таймер, заданный методом setlnterval
clearTimeout
Сбрасывает таймер, заданный методом setTimeout
click
Имитирует щелчок мыши на объекте и инициирует событие onclick
close
Закрывает окно просмотра браузера
collapse
Сворачивает текстовую область в точку
compareEndPoints
Сравнивает две текстовые области
confirm
Отображает окно с текстом и кнопками ОК и Cancel
contains
Проверяет, включен ли в текущий объект другой объект, наименование которого передается методу в качестве параметра
createRange
Создает копию выделенной части документа
createTextRange
Создает область текста
duplicate
Копирует текстовую область
element FromPoint
Возвращает элемент, находящийся в точке, координаты которой переданы методу в качестве параметров
empty
Очищает выделение
execCommand
Выполняет заданную команду
execScript
Выполняет заданный скрипт
expand
Расширяет область текста, добавляя в нее новые фрагменты
findText
Отыскивает текст, переданный в качестве параметра в содержимом документа
focus
Переводит фокус ввода к данному объекту
forward
Загружает в окно просмотра HTML-документ, который находится в списке посещенных страниц на одну позицию впереди текущего документа
getAttribute
Возвращает значение параметра-атрибута текущего объекта, наименование которого передано методу в качестве параметра
getBookmark
Возвращает строковое значение, определяющее закладку для локальной гиперссылки в данном объекте
go
Загружает в окно просмотра браузера HTML-документ из списка посещенных Web-страниц, номер которого относительно текущего документа передан методу в качестве параметра
inRange
Возвращает булево значение, которое указывает, находится ли текстовая область, переданная методу в качестве параметра, внутри исходной области
insertAd j acentHTML
Вставляет внутрь текущего элемента HTML-код, переданный методу в качестве параметра. При этом, все теги адекватно обрабатываются браузером
insertAdj acentText
Вставляет внутрь текущего элемента текст, переданный методу в качестве параметра. Если в переданном тексте имеются теги HTML, то они игнорируются браузером
isEqual
Метод возвращает булеву величину, которая указывает, эквивалентна ли текстовая область, переданная методу в качестве параметра, исходной, к которой метод и применяется
item
Метод возвращает объект, входящий в коллекцию под порядковым номером, который передается методу в качестве параметра
javaEnabled
Метод возвращает булево значение, которое показы- вает, включена или нет поддержка Java в данном браузере
move
Перемещает границы текстовой области
moveEnd
Перемещает конечную границу текстовой области
moveStart
Перемещает начальную границу текстовой области
moveLight
Перемещает источник света в графическом фильтре
moveToBookmark
Перемещает границы текстовой области для включения в нее закладки, определенной при помощи метода
getBookmark
moveToElementText
Перемещает границы текстовой области таким обра- зом, чтобы в нее вошел текст, находящийся в элементе Web-страницы, ссылка на который передана методу в качестве параметра
moveToPoint
Перемещает текстовую область к точке, координаты котой переданы в качестве параметров, и сжимает область вокруг этой точки
open
Открывает документ для записи в него нового содер- жимого при помощи методов write и writeln
open
Открывает новое окно браузера и загружает в него документ, URL которого передается в качестве параметра
parentElement
Метод возвращает элемент Web-страницы, который является родительским по отношению к текстовой области
pasteHTML
Вставляет HTML-код в текущую текстовую область
play
Накладывает графический фильтр на содержимое Web-страницы
PrevPage
Отображает предыдущую страницу в таблице
prompt
Отображает окно ввода информации
queryCommandEnabled
Возвращает булево значение, показывающее, доступна ли для выполнения команда, переданная методу в качестве параметра
queryCoiranandlndeterm
Метод возвращает логическое значение True, если команда имеет неопределенный статус
queryCommandState
Возвращает текущее состояние команды в настоящий момент времени
queryCornmandSupported
Возвращает логическое значение, указывающее, поддерживается данная команда браузером или нет
queryCornmandText
Возвращает строковое значение команды
queryCommandValue
Возвращает значение команды
refresh
Метод обновляет содержимое таблицы
reload
Перезагружает текущую Web-страницу в окне просмотра
remove
Удаляет из коллекции элемент с порядковым номером, переданным методу в качестве параметра
removeAttribut
Удаляет из тега параметр-атрибут, имя которого пере- дано методу в качестве параметра
reset
Метод имитирует нажатие пользователем кнопки Reset, и порождает событие onreset
scroll
Разворачивает окно просмотра браузера на заданную ширину и высоту, которые передаются методу в качестве параметра
scrollIntoView
Прокручивает Web-страницу в окне просмотра браузера таким образом, чтобы элемент, к которому был применен данный метод, отображался в видимой зоне окна
select
Делает выделенный пользователем участок содержимого Web-страницы равным текстовой области, к которой метод и применяется
setAttribue
Добавляет в тег дополнительный параметр-атрибут и устанавливает его значение
setEndPoint
Переносит одну из граничных точек текущей текстовой области в соответстующйю граничную точку другой текстовой области, которая передана методу в качестве параметра
setlnterval
Заставляет инструкцию, переданную методу в качестве параметра, периодически выполняться. Время периода повтора также передается методу как параметр
setTimeout
Выполняет инструкцию один раз после истечения за- данного времени
showHelp
Отображает окно оперативной справки
showModal Dialog
Отображает диалоговое окно
stop
Принудительно прекращает динамическое действие графического фильтра
submit
Имитирует нажатие пользователем кнопки Submit
write
Добавляет в текущий документ HTML-код, переданный методу в качестве параметра
writeln
Добавляет в текущий документ HTML-код, переданный методу в качестве параметра, и заканичвает его сим- волом возврата каретки
zOrder
Устанавливает z-индекс для вертикального псевдопо- зиционирования элементов

Но объекты обладают не только методами. Их неотъемлемой частью являются еще и свойства. И различные объекты имеют различные списки присущих им свойств. Соответствие тегов HTML и свойств, присущих объектам, порождаемым этими тегами, приведено в табл. 7.6.

Таблица 7.6. Теги и свойства

Тег
Описание
Список свойств
<а>
Гиперссылка
accessKey, className, dataFld, dataSrc, document, event, hash, host, hostname, href, id, innerText, isTextEdit, lang, language, methods, name, of f setheight, of fsetLeft, of fsetParent, of fsetTop, of fsetWidth, outerText, parentElement, parentTextEdit, pathname, port, protocol, rel, rev, search, sourcelndex, style, tagName, target, title, urn
<address>
Специализированное форматирование текста
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of f setHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<applet>
Внедряет в состав Web-страницы java-апплет
accessKey, align, className, code, CodeBase, dataFld, dataSrc, disabled, document, hspace, id, isTextEdit, lang, language, name, of fsetHeight, of fsetlLeft, offsetparent, of fsetTop, of f setWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, src, style, tagName, title, vspace
<area>
Создает активную область-гиперссылку в сегментированной графике
alt, className, coords, document, event, hash, host, hostname, href, id, isTextEdit, lang, language, noHref, of fsetHeight, of fsetlLeft, offsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, pathname, port, protocol, search, shape, sourcelndex, style, tagName, target, title
<b>
Выделяет текст полужирным шрифтом
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, offsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, sourcelndex, style, tagName, title
<base>
Указывает URL основного документа
className, document, href, id, isTextEdit, lang, outerHTML, outerText, parentElement, parenttextEdit, sourcelndex, tagName, target, title
<basefont>
Устанавливает шрифт, используемый по умолчанию
className, color, document, face, id, isTextEdit, outerHTML, outerText, parentElement, parentTextEdit, size, sourcelndex, tagName, title
<bgsound>
Задает фоновый звук
balance, className, document, id, isTextEdit, loop, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, src, style, tagName, title, volume
<big>
Увеличивает размер шрифта на единицу
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, offsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<blockquote>
Специализированное форматирование текста
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of f setparent, of fsetTop, of f setWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<body>
Определяет содержательную часть Web-страницы
accessKey, alinkColor, background, bgColor, bgProperties, bottomMargin, className, clientHeight, clientWidth, document, event, id, innerHTML, innerText, isTextEdit, lang, language, leftMargin, linkColor, of fsetHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, rightmargin, scroll, scrollHeight, scrollLeft, scrollTop, scrollWidth, sourcelndex, style, tagName, text, title, topMargin, vlinkColor
<br>
Принудительный обрыв строки
className, clear, document, id, isTextEdit, language, of fsetHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<button>
Создает кнопку
accessKey, className, dataFld, dataFormatAs, dataSrc, disabled, document, event, form, id, innerHTML, innerText, isTextEdit, lang, language, name, of fsetHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, status, style, tagName, title, type, value
<caption>
Создает заголовок таблицы
align, className, clientHeght, clientWidth, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title, vAlign
<center>
Центрирует блок содержимого
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of f setHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<cite>
Специализированное форматирование текста
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of f setHeight, of fsetlLeft, of fsetparent, offsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<code>
Специализированное форматирование текста
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of fsetparent, offsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<col>
Определяет столбец таблицы
align, className, document, event, id, isTextEdit, parentElement, parentTextEdit, span, style, tagName, title, vAlign
<colgroup>
Объявляет группу столбцов таблицы
align, className, document, id, isTextEdit, parentElement, parentTextEdit, span, style, tagName, title, vAlign
<dd>
Элемент списка
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of fsetparent, offsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<dfn>
Специализированное форматирование текста
%
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of fsetparent, offsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<div>
Группировка элементов содержимого Web-страницы
align, className, clientHeght, clientWidth, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of f setWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<dl>
Создание списка
className, compact, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, offsetparent, offsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<dt>
Создание элемента списка
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, offsetlLeft, offsetparent, offsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<em>
Специализированное форматирование текста
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, offsetlLeft, offsetparent, offsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<embed>
Внедрение в состав содержимого Web-страницы объектов различных типов
accessKey, align, className, clientHeight, clientWidth, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, offsetlLeft, offsetparent, offsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, recordNumber, scrollHeight, scrollLeft, scrollTop, SHcrollWidth, sourcelndex, style, tablndex, tagName, title
<font>
Определение шрифта для отображения текста
className, color, document, event, face, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, size, sourcelndex, style, tagName, title
<form>
Определяет форму в HTML-документе
action, className, document, encoding, event, id, innerHTML, innerText, isTextEdit, lang, language, method, name, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tnagName, target, title
<frame>
Создает отдельный фрейм
borderColor, className, document, dataFld, dataSrc, event, frameBorder, height, id, isTextEdit, lang, language, marginHeight, marginWidth, name, noResize, parentElement, parentTextEdit, sourcelndex, src, style, tagName, title
<frameset>
Определяет фреймовую структуру
border, borderColor, className, cols, document, frameBorder, frameSpacing, id, isTextEdit, lang, language, parentElement, parentTextEdit, rows, sourcelndex, style, tagName, title
<head>
Объявляет заголовок документа
className, document, id, isTextEdit, parentElement, sourcelndex,
tagName, title
<hl> - <h6>
Создают заголовки
align, className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<hr>
Отображает горизонтальную линию
align, className, color, document, event, id, isTextEdit, lang, language, noShade, of f setHeight, of fsetlLeft, of f setparent, of fsetTop, of f setWidth, outerHTML, outerText, parentElement, parentTextEdit, size, sourcelndex, style, tagName, title, width
<html>
Объявляет содержимое на языке HTML
className, document, id, isTextEdit, language, parentElement, sourcelndex, style, tagName, title
<i>
Выделяет текст курсивом
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of f setHeight, of fsetlLeft, of f setparent, of fsetTop, of f setWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<if rame>
Вставляет плавающий фрейм
align, border, borderColor, className, dataFld, dataSrc, document, event, f rameBorder, f rameSpacing, height, hspace, id, innerHTML, innerText, isTextEdit, lang, language, marginHeight, marginWidth, name, noResize, of fsetHeight, of fsetlLeft, of f setparent, of fsetTop, of f setWidth, outerHTML, outerText, parentElement, parentTextEdit, scrolling, sourcelndex, src, style, tagName, title, vspace, width
<irag>
Вставляет графическое изображение
align, alt, border, className, dataFld, dataSrc, document, dynsrc, event, height, hspace, id, isMap, isTextEdit, lang, language, loop, lowsrc, name, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of f setWidth, outerHTML, outerText, parentElement, parentTextEdit, readyState, SHcrollHeight, scrollLeft, scrollTop, scrollWidth, src, start, sourcelndex, style, tagName, title, useMap, vspace, width
<input>
Создает орган ввода информации
accesskey, checked, className, dataFld, dataSrc, dataFormatAs, def aultChecked, defaultValue, disabled, document, event, form, id, indeterminate, innerHTML, innerText, isTextEdit, lang, language, maxLength, name, of fsetHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, readonly, recordNumber, size, sourcelndex, src, status, style, tablndex, tagName, title, type, value
<kbd>
Специализированное форматирование текста
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<label>
Создает текстовую метку для некоторых органов ввода информации
accessKey, className, document, event, htmlFor, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<li>
Создает элемент списка
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title, type, value
<link>
Объявляет связь между различными HTML- документами
className, disabled, document, href, id, parentElement, readyState, rel, sourcelndex, style, tagName, title, type
<listing>
Специализированное форматирование текста
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of f setHeight, of fsetlLeft, of f setparent, of f setTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<map>
Создает карту сегментированной графики
className, document, event, ind, innerHTML, innerText, isTextEdit, lang, пяате, of f setHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<meta>
Объявляет мета-переменную в HTML-документе
charset, className, content, document, httpEquiv, id, isTextEdit, lang, name, parentElement, parentTextEdit, sourcelndex, tagName, title, url
<object>
Внедряет какой-либо объект в HTML-документ
accessKey, align, classid, className, code, CodeBase, codeType, data, dataFld, dataSrc, disabled, document, event, height, id, isTextEdit, lang, language, name, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, readyState, sourcelndex, style, tablndex, tagName, title, type, width
<ol>
Создает нумерованный список
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, onf fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, start, style, tagName, title, type
<option>
Создает элемент выпадающего списка
className, document, event, id, isTextEdit, language, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, selected, sourcelndex, style, tagName, text, title. Value
<р>
Задает текстовый абзац
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of f setlLef t, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<plaintext>
Устанавливает специализированное форматирование текста
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<pre>
Устанавливает специализированное форматирование текста
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<s>
Отображает зачеркнутый текст
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<script>
Объявляет программу-скрипт, включенную в состав HTML-документа
className, document, event, htmlFor, id, innerHTML, innerText, isTextEdit, outerHTML, outerText, parentElement, parentTextEdit, readyState, sourcelndex, src, style, tagName, text, title
<select>
Создает орган ввода данных
accessKey, className, dataFld, dataSrc, disabled, document, event, form, id, isTextEdit, lang, language, length, multiple, name, of fsetHeight, of fsetlLeft, offsetparent, of fsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, recordNumber, selectedlndex, size, sourcelndex, style, tablndex, tagName, title, type, value
<small>
Уменьшает размер используемого шрифта
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of f setHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<span>
Применяется для группировки элементов Web-страницы
className, dataFld, dataSrc, dataFormatAs, document, event, id, innerText, isTextEdit, lang, language, of f setHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerText, parentElement, parentTextEdit, scrollHeight, scrollLeft, scrollTop, scrollWidth, sourcelndex, style, tagName, title
<strike>
Отображает зачеркнутый текст
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of f setHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<strong>
Отображает текст полужирным начертанием шрифта
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<style>
Создает таблицу стилей отображения
className, disabled, document, id, isTextEdit, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, parentElement, parentTextEdit, readyState, sourcelndex, style, tagName, title
<sub>
Устанавливает специализированное форматирование текста
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<small>
Уменьшает размер используемого шрифта
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of f setHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<span>
Применяется для группировки элементов Web-страницы
className, dataFld, dataSrc, dataFormatAs, document, event, id, innerText, isTextEdit, lang, language, of f setHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerText, parentElement, parentTextEdit, scrollHeight, scrollLeft, scrollTop, scrollWidth, sourcelndex, style, tagName, title
<strike>
Отображает зачеркнутый текст
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of f setHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<strong>
Отображает текст полужирным начертанием шрифта
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<style>
Создает таблицу стилей отображения
className, disabled, document, id, isTextEdit, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, parentElement, parentTextEdit, readyState, sourcelndex, style, tagName, title
<sub>
Устанавливает специализированное форматирование текста
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<sup>
Устанавливает специализированное форматирование текста
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of f setparent, offsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<table>
Создание таблицы
align, background, bgColor, border, borderColor, borderColorDark, borderColorLight, cellPadding, cellspacing, className, clientHeight, clientWidth, cols, dataFld, dataPageSize, dataSrc, document, event, frame, height, id, innerText, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of f setparent, offsetTop, of fsetWidth, outerText, parentElement, parentTextEdit, rules, scrollHeight, scrollLeft, scrollTop, scrollWidth, sourcelndex, style, tagName, title, width
<tbody>
Обозначает основной раздел таблицы
align, bgColor, className, document, event, id, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of f setparent, offsetTop, of fsetWidth, parentElement, parentTextEdit, sourcelndex, style, tagName, title, vAlign
<td>
Объявляет ячейку таблицы
align, background, bgColor, borderColor, borderColorDark, borderColorLight, className, clientheight, clientWidth, colSpan, document, event, height, id, innerText, isTextEdit, lang, language, noWrap, of fsetHeight, of fsetlLeft, of fsetparent, offsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, rowSpan, sourcelndex, style, tagName, title, vAlign, width
<textarea>
Создает многострочное поле текстового ввода
accesskey, className, clientHeight, clientWidth, cols, dataFld, dataSrc, disabled, document, event, form, id, innerText, isTextEdit, lang, language, name, of fsetHeight, of fsetlLeft, of f setparent, of fsetTop, of fsetWidth, outerText, parentElement, parentTextEdit, readonly, rows, scrollHeight, scrollLeft, scrollTip, scrollWidth, sourcelndex, status, style, tablndex, tagName, title, type, value, wrap
<tfoot>
Создает нижнюю часть таблицы
align, bgColor, className, document, event, id, isTextEdit, lang, language, of fsetHeight, onf fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, parentElement, parentTextEdit, sourcelndex, style, tagName, title, vAlign
<th>
Объявляет строку заголовка таблицы
align, background, bgcolor, borderColor, borderColorDark, borderColorLight, className, colSpan, document, event, id, isTextEdit, lang, language, noWrap, of fsetHeight, of fsetlLeft, offsetparent, of fsetTop, of fsetWidth, parentElement, parentTextEdit, rowSpan, sourcelndex, style, tagName, title, vAlign
<thead>
Создает область заголовка таблицы
align, bgColor, className, document, event, id, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, offsetparent, of fsetTop, of fsetWidth, parentElement, parentTextEdit, sourcelndex, style, tagName, title, vAlign
<title>
Задает заголовок документа
className, document, id, isTextEdit, lang, parentElement, parentTextEdit, sourcelndex, tagName, title
<tr>
Объявляет строку таблицы
align, bgColor, borderColor, border Co lor Dark, border Col or Light, className, document, event, id, isTextEdit, lang, language, of fsetHeight, of fsetlLeft, of fsetparent, of fsetTop, of fsetWidth, parentElement, parentTextEdit, sourcelndex, style, tagName, title, vAlign
<tt>
Устанавливает специализированное шрифтовое осрормление
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, offsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<u>
Отображает подчеркнутый текст
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, offsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title
<ul>
Создает маркированный список
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, offsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title, type
<var>
Устанавливает специализированное форматирование текста
className, document, event, id, innerHTML, innerText, isTextEdit, lang, language, of fsetHeight, offsetlLeft, of fsetparent, of fsetTop, of fsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourcelndex, style, tagName, title

В этой таблице мы установили соответствие между тегами и свойствами элементов оформления Web-страниц, которые создаются при помощи этих тегов. Легко заметить, что часто наименования свойств повторяют наименования параметров-атрибутов, входящих в состав тегов. Это не случайно: зна-
чения этих свойств совпадают со значениями параметров тегов, прописанными в коде HTML-документа. Также среди них встречаются аналоги элементов CSS. Но есть и иные свойства, с которыми мы не успели ознакомиться при рассмотрении объекнтой модели браузера. В табл. 7.7 приведен список всех свойств, входящих в объектную модель DHTML с их краткой характеристикой.

Таблица 7.7. Свойства в DHTML

Свойство
Описание
accessKey
Задает "горячую клавишу" для быстрой установки фокуса ввода на элемент
action
Указывает адрес приложения или документа, обрабатывающего данные, передаваемые формой
activeElement
Идентификатор активного элемента
align
Задает выравнивание элемента
alinkColor
Указывает цвет отображения активных ссылок на странице
alt
Задает текст, заменяющий графическое изображение
altKey
Указывает состояние клавиши <Alt>
appCodeName
Содержит кодовое наименование движка браузера, в котором отображается текущая Web-страница
appName
Содержит краткое наименование браузера, в котором отображается текущая Web-страница
appVersion
Содержит номер версии используемого пользователем браузера
background
Задает графическое изображение или цвет, используемое в качестве фона для данного элемента
backgroundAttachment
Задает алгоритм отображения фоновой картинки при прокручивании содержимого Web-страницы в окне просмотра браузера
backgroundColor
Указывает фоновый цвет элемента
backgroundlmage
Содержит URL графического файла с изображением, использующимся в качестве фона для элемента
backgroundPosition
Задает координаты расположения фонового изображения
backgroundPositionX
Содержит горизонтальную координату левого верхнего угла фонового изображения относительно левого верхнего угла элемента, содержащего ее
backgroundPositionY
Содержит вертикальную координату левого верхнего угла фонового изображения относительно левого верхнего угла элемента, содержащего ее
backgroundRepeat
Задает алгоритм повтора фоновой картинки
balance
Указывает соотношение громкости левого и правого каналов для фоновой музыки
bgColor
Задает цвет фона элемента
bgProperties
Предоставляет доступ к свойствам фонового изображения
body
Содержит весь HTML-код, заключенный между тегами <body> и </body>. Имеет статус "только для чтения"
border
Задает тип рамки вокруг элемента
borderBottom
Задает тип нижней границы элемента
borderBottomColor
Указывает цвет нижней границы элемента
borderBottomStyle
Устанавливает стиль отображения нижней границы элемента
borderBottomWidth
Задает ширину нижней границы элемента
borderColor
Позволяет устанавливать цвет рамки вокруг элемента
borderColorDark
Устанавливает цвет "темной половины" рамки, т. е. нижней и правой границ
border Co lor Light
Устанавливает цвет "светлой половины" рамки, т. е. верхнней и левой границ
BorderLeft
Задает тип левой границы элемента
border Left Color
Указывает цвет левой границы элемента
borderLeftStyle
Устанавливает стиль отображения левой границы элемента
borderLeftWidth
Задает ширину левой границы элемента
BorderRight
Задает тип правой границы элемента
borderRight Color
Указывает цвет правой границы элемента
borderRight Style
Устанавливает стиль отображения правой границы элемента
borderRightWidth
Задает ширину правой границы элемента
borderStyle
Устанавливает стиль отображения всех четырех границ элемента
BorderTop
Задает тип верхней границы элемента
borderTopColor
Указывает цвет верхней границы элемента
borderTopStyle
Устанавливает стиль отображения верхней границы элемента
borderTopWidth
Задает ширину верхней границы элемента
borderWidth
Устанавливает ширину всех четырех границ элемента
bottomMargin
Задает нижнее поле элемента
button
Указывает состояние кнопок мыши при возникновении соответствующих событий
cancelBubble
Регулирует передачу события вверх по объектной иерархии
cellPadding
Задает расстояние между содержимым ячейки и ее границей
cellspacing
Устанавливает расстояние между ячейками в таблице
charset
Содержит наименование используемой кодировки символов
checked
Указывает, что тот или иной независимый или зависимый переключатель отмечены пользователем
classid
Содержит идентификатор класса объекта, применяемого для установки связи с одним из селекторов используемой стилевой таблицы
className
Задает класс (а не идентификатор) стилевой таблицы, связанной с данным тегом
clear
Устанавливает более точное позиционирование текста после графического объекта
client
Возвращает объект navigator для браузера
clientHeight
Содержит высоту элемента без служебных элементов (поля, полосы прокрутки, границы и пр.)
clientwidth
Содержит ширину элемента, исключая служебные элементы
clientX
Возвращает горизонтальную координату элемента без служебных дополнений
clientY
Возвращает вертикальную координату элемента без служебных дополнений
clip
Определяет порядок отображения содержимого, большего по размерам, нежели отображаемая область элемента
closed
Указывает, закрыто ли текущее окно просмотра
CodeBase
Содержит URL кода внедряемого объекта
codeType
Указывает тип кода для внедряемого объекта
color
Задает цвет элемента
colorDepth
Указывает число бит на символ, которое регули- рует количество отображаемых цветов
cols
Число столбцов в таблице или наборе фреймов
colSpan
Число столбцов, объединенных данной ячейкой таблицы
compact
Задает компактную модель отображения списков
complete
Сигнализирует о полной загрузке содержимого страницы
content
Содержимое метапеременной пользователя или заголовка протокола HTTP в теге <meta>
cookie
Содержит строку cookie-информации, хранящейся в локальной системе удаленного пользователя
cookieEnabled
Определяет, разрешает ли браузер пользователя использование cookie-информации
coords
Содержит координаты углов активной области сегментированной графики
cssText
Содержит значение параметра style для искомого тега.
CtrlKey
Определяет состояние клавиши <Ctrl> при обработке событий
cursor
Определяет внешний вид курсора мыши
data
Содержит URL объекта, содержащего данные, отображаемые объектом
dataFld
Определяет поле источника данных, данные из которого отображаются в элементе
data Format As
Указывает формат данных, получаемых из источника
dataSrc
Указывает источник данных, отображаемых элементом
default Checked
Содержит логическое значение, указывающее, находится ли объект в исходном состоянии, определяемом по умолчанию
defaultStatus
Устанавливает строку, отображаемую в строке статуса браузера по умолчанию
def aultValue
Содержит текст, отображаемый в элементе по умолчанию
dialogArguments
Содержит список аргументов, передаваемых диалоговому окну
dialogHeight
Содержит значение, указывающее высоту диалогового окна
dialogLeft
Задает горизонтальную координату верхнего левого угла диалогового окна
dialogTop
Задает вертикальную координату верхнего левого угла диалогового окна
dialogWidth
Содержит значение, указывающее ширину диалогового окна
disabled
Содержит логическое значение, указывающее, является ли доступным данный элемент
display
Указывает, будет ли отображаться данный эле- мент
document
Свойство объекта window, ссылающееся на объ- ект document
domain
Содержит доменное имя сайта, с которого был загружен текущий элемент
duration
Задает временной интервал смены графического фильтра
dynsrc
%
Задает URL видеоклипа, отбражаемого в HTML- документе
encoding
Содержит тип кодировки, в которой отправляются данные из формы на сервер
hspace
Задает величину гризонтального отступа между текущим и соседними элементами
html For
Ссылается на элемент, с которым связан выполняемый скрипт
htmlText
Возвращает HTML-код содержимого объекта
TextRange
id
Содержит уникальный идентификатор элемента
indeterminate
Указывает, является ли недоступным для использования элемент ввода данных
innerHTML
Содержит HTML-код, находящийся между открывающим и закрывающим тегами данного элемента
innerText
Содержит текст, находящийся между открываю- щим и закрывающим тегами данного элемента
isTextEdit
Содержит логическое значение, указывающее, может ли данный элемент служить в качестве базы для создания на его основе объекта
TextRange
keyCode
Содержит код нажатой клавиши
lang
Наименование применяемого языка программи- рования скриптов по версии ISO
language
Содержит наименование применяемого языка программирования скриптов
lastModified
Содержит текстовую строку, в которой указывается дата последнего изменения содержимого страницы
left
Задает горизонтальную координату верхнего левого угла элемента
leftMargin
Задает величину левого поля для данного элемента
length
Указывает количество элементов в коллекции
letterSpacing
Задает величину межбуквенного интервала
lineHeight
Устанавливает междустрочный отступ
linkColor*
Содержит цвет обычных гиперссылок, размещенных на Web-странице
listStyle
Задает стиль отображения списка
event
Ссылка на объект event
face
Задает вид шрифта, используемого для отображения текста
fgcolor
Содержит обозначение цвета, используемого для отображения содержимого элемента
filter
Задает применяемый к данному элементу графический фильтр
font
Содержит перечень атрибутов применяемого шрифта
fontFamily
Устанавливает наименования используемых шрифтов
fontSize
Задает размер используемого шрифта
fontStyle
Указывает начертание применяемого шрифта
fontVariant
Задает способ отображения символов шрифта
fontWeight
Устанавливает ширину символов применяемого шрифта
form
Указывает на форму, в которой находится искомый элемент
frame
Ссылается на одноименный объект
f rameBorder
Устанавливает вид границ фрейма
f rameSpacing
Задает размер отступа между фреймами
f romElement
Содержит имя элемента, с которого ушел курсор мыши при инициировании сответствующих событий
hash
Часть URL, находящаяся после символа "#"
height
Содержит высоту элемента или разрешение экрана, удаленного пользователя в пикселах
hidden
Указывает, является ли данный элемент скрытым или нет
history
Ссылается на одноименный объект
host
Содержит доменное имя и номер порта сервера, с которого был загружен данный документ
hostname
Содержит доменное имя сайта, с которого получен HTML- документ
href
Содержит полный URL HTML-документа, загруженного в данное окно просмотра
noWrap
Указывает, разрешено ли браузеру переносить текст на другие строки, если тот в виде одной строки выходит за предопределенные размеры элемента
object
Содержит ссылку на объект, внедренный в состав содержимого Web-страницы
of f setHeight
Содержит высоту содержимого элемента, включая и ту его часть, которая может быть не видна в данный момент
OffsetLeft
Указывает горизонтальную координату верхнего левого угла содержимого элемента, даже в том случае, если в текущий момент этот угол не виден, и доступ к нему может быть осуществ- лен при помощи полос прокрутки
offsetParent
Указывает координаты элемента, являющегося родительским, по отношению к текущему
of fsetTop
Указывает вертикальную координату верхнего левого угла содержимого элемента, даже в том случае, если в текущий момент этот угол не виден, и доступ к нему может быть осуществлен при помощи полос прокрутки
offsetWidth
Содержит ширину содержимого элемента, включая и ту его часть, которая может быть не видна в данный момент
offsetX
Указывает горизонтальную координату курсора мыши относительно левого верхнего угла элемента, в котором он находился в момент возникновения обрабатываемого события
offsetY
Указывает горизонтальную координату курсора мыши относительно левого верхнего угла элемента, в котором он находился в момент возникновения обрабатываемого события
opener
Содержит ссылку на окно, из которого было открыто текущее окно просмотра
outerHTML
Содержит HTML-код всего элемента, включая от- крывающий и закрывающий теги
outerText
Предоставляет доступ к текстовому содержимому элемента, включая стартовый и закрывающий теги
overflow*
Определяет порядок отображения текста, выходящего за пределы элемента, в котором он содержится
padding
Задает размер расстояния между содержимым элемента и его рамкой
paddingBottom
Устанавливает размер расстояния между содержимым элемента и нижней его границей
paddingLeft
Устанавливает размер расстояния между содержимым элемента и левой его границей
paddingRight
Устанавливает размер расстояния между содержимым элемента и правой его границей
paddingTop
Г У f
Устанавливает размер расстояния между содержимым элемента и его верхней границей
pageBreakAfter
Создает разрыв текстового раздела на странице после текущего элемента
pageBreakBefore
Создает разрыв текстового раздела на странице перед текущим элементом
palette
Ссылается на цветовую палитру, установленную для отбражения внедренного объекта
parent
Ссылка на родительский фрейм или окно просмотра
parentStyleSheet
i ~
Указывает на родительскую таблицу стилевого оформления
parentTextEdit
Ссылается на родительский объект, который может быть использован в качестве базы для создания объекта TextRange
parentWindow
Ссылается на родительское окно просмотра
pathname
Задает имя файла, расположенное в URL посе доменного имени сайта
pixelHeight
Содержит числовое значение, указывающее высоту элемента в пикселах
pixelLef t
Содержит числовое значение горизонтальной координаты элемента
pixelTop
Содержит числовое значение вертикальной координаты элемента
pixelWidth
Содержит числовое значение, указывающее ширину элемента в пикселах
plugins
Ссылка на коллекцию подключенных к браузеру внешних модулей, предназначенных для отображения встроенных объектов
port
Номер порта в URL документа, на котором функционирует Web-сервер, с которого и был получен данный документ
posHeight
Содержит значение высоты элемента в единицах измерения, которые использовались последний раз
position
Определяет тип позиционирования элемента
posLeft
Содержит значение горизонтальной координаты верхнего левого угла элемента в единицах измерения, которые использовались последний раз
posTop
Содержит значение вертикальной координаты верхнего левого угла элемента в единицах измерения, которые использовались последний раз
posWidth
Содержит значение ширины элемента в единицах измерения, которые использовались последний раз
protocol
Стартовая часть URL, в которой указан протокол, использовавшийся для получения данного документа
readonly
Указывает, что содержимое элемента предназна- чается только для чтения, и не может быть моди- фицировано
readyState
Указывает текущее состояние загружаемого объекта
reason
Содержит значение, сигнализирующее об успешности загрузки содержимого элемента
recordNumber
Содержит номер записи в таблице, связанной с источником данных
recordSet
Ссылается на набор записей в элементе, если тот связан с каким-либо источником данных
ref
Содержит значение, указывающее, является ли данный элемент URL-адресом
referrer
URL-адрес документа, по ссылке из которого был загружен текущий документ
rel
Определяет назначение документа, на который указывает элемент-гиперссылка
returnValue
Задает возвращаемое значение
rows
Число строк в таблице или наборе фреймов
rowSpan
Содержит число строк таблицы, объединяемых ячейкой
screen
Ссылается на объект screen
screenX
Содержит горизонтальную координату курсора мыши в пикселах, относительно самого экрана
screenY
Содержит вертикальную координату курсора мыши в пикселах, относительно самого экрана
scroll
Управляет отображением полос прокрутки
scrollHeight
Высота видимого содержимого элемента в пикселах
scrolling
Управляет возможностью прокручивания содер- жимого фрейма в окне просмотра
scrollLeft
Содержит расстояние в пикселах от левого края содержимого элемента до левого края видимой области элемента
scrollTop
Содержит расстояние в пикселах от верхней границы содержимого элемента до верхнего края видимой области элемента
scrollWidth
Ширина видимого содержимого элемента в пикселах
search
Строка запроса в URL, расположенная после знака ?
selected
Указывает, что данный элемент выпадающего списка является выбранным по умолчанию
selectedlndex
Содержит в каестве значения число, являющееся порядковым номером выбранного элемента в списке
selection
Ссылается на одноименный объект selection
self
Ссылается на текущее окно просмотра
shape
Устанавливает форму активной области сегментированной графики
shif tKey
Указывает состояние клавиши <Shift> в момент обработки события
size
Задает размер элемента
sourcelndex
Содержит число, являющееся порядковым номером элемента в коллекции all
span
Определяет количесво столбцов таблицы, объединяемых элементом colgroup
src
Содержит URL внешнего файла, в котором находится содержимое элемента
srcElement
Указывает элемент, в котором было изначально инициировано обрабатываемое событие
srcFilter
Указывает, какой фильтр инициировал событие
onf ilterchange
start
Указывает номер первого элемента списка
status
Содержит текст, отображающийся в строке статуса браузера
style
Определяет стиль, применяемый к элементу
styleFloat
Задает порядок обтекания элементом иных объектов содержимого Web-страницы
tablndex
Содержит порядковый номер элемента в последовательности органов управления и ввода информации, перемещение между которыми осуществляется при помощи клавиши табуляции
tagName
Содержит наименование тега, при помощи которого реализуется искомый элемент
target
Указывает наименование окна или фрейма, в котором будет отображаться HTML-документ
text
Устанавливает цвет, которым будет отображаться текст
textAlign
Задает выравнивание текста
text Decoration
Устанавливает эффект отображения текста
text Decora tionLineThrough
Указывает механизм зачеркивания текста
textlndent
Задает отступ для первой строки абзаца
textTransform
Задает порядок отображения символов текста
title
Содержит краткое наименование или описание элемента, которое обычно отображается в виде подсказки-хинта
toElement %
Содержит наименование элемента, на который попадает курсор мыши при возникновении событий onmouseover и onmouseout
top
Задает вертикальную координату верхней границы элемента
topMargin
Устанавливает размер верхнего поля элемента
type
Устанавливает тип создаваемого элемента ввода данных
update Interval
Сообщает частоту обновлений экрана системы удаленного пользователя
url
Содержит URL документа
userAgent
Содержит HTTP-заголовок, который инициирует обмен данными между удаленным пользователем и сервером
vAlign
Определяет вертикальное выравнивание элемента
value
Содкержит текст или значение, отображаемое по умолчанию в органах управления и ввода информации
verticalAlign
Управляет вертикальным выравниванием элемен- та при промощи средств CSS
visibility
Определяет видимость элемента
vlinkColor
Задает цвет гиперссылок, посещенных данным удаленным пользователем
vspace
Устанавливает размер отступа по вертикали между соседними элементами
width
Задает ширину элемента
width
Указывает горизонтальное разрешение экрана системы удаленного пользователя
window
Содержит ссылку на окно просмотра, в котором отображается данный HTML-документ
wrap
Определяет порядок разрыва строк в случаях, когда те по своим размерам превосходят элемент, в котором они содержатся
X
Содержит горизонтальную координату курсора мыши в момент обработки какого-либо события
Y
»
Содержит вертикальную координату курсора мыши в момент обработки какого-либо события
z-index
Содержит координату вертикального псевдопозиционирования элемента

Таким образом, все таблицы, которые были приведены в данном разделе главы, составляют единый блок, полностью описывающий возможности обработки любых тегов HTML-доку ментов при помощи технологии DHTML.

Применение стилей

Мы уже знаем, что применение каскадных таблиц стилей позволяет нам добиваться самых поразительных эффектов в оформлении содержимого Web-страниц. Но когда эти и без того немалые возможности соединяются с технологией DHTML, разработчик Web-страниц получает в свое распоряжение практически неограниченные возможности манипулирования содержимым Web-страницы. В этом разделе мы рассмотрим основные приемы манипулирования правилами отображения элементов Web-страниц при помощи стилей.
Как мы знаем, есть два метода работы со стилями. Можно создать стилевую таблицу, причем, в данном случае не так уж важно, будет она встроенной или внешней, а затем обращаться к правилам отображения из этой таблицы при помощи значений параметров class, которые будут совпадать с теми или иными селекторами стилевой таблицы. А можно воспользоваться параметром style, который встраивается практически во все теги. Мы уже знаем, что создание отдельной стилевой таблицы оправданно в тех случаях, когда необходимо создать единообразное оформление. А если нам требуется, как можно более гибко управлять параметрами отображения многих элементов, стоит использовать задание стиля для каждого отдельного тега.
Для начала мы рассмотрим примеры операций с отдельными стилевыми таблицами. Существует два подхода к данной проблеме. Мы можем либо динамически изменять подключенную стилевую таблицу, либо менять идентификаторы классов у элементов оформления Web-страниц.
Изменение идентификаторов классов обычно используется в тех случаях, когда все необходимые правила отображения уже описаны в стилевой таблице, связанной с HTML-документом, а разработчику необходимо лишь гибко применять различные правила к одному и тому же элементу содержимого. Приведем один из примеров подобного подхода.
Мы можем создать документ, основным содержимым которого является таблица с тремя столбцами и одной строкой. В первой ячейке мы раполо-жим два наименования коротких заметок, связанных с переключателями. Сами заметки мы разместим во второй и третьей ячейках. А пользователь, выбирая тот или иной переключатель, будет визуализировать соответствующий текст. Таким образом, когда отображается содержимое второй ячейки, не отображается содержимое третьей ячейки, и наоборот. Код подобного документа приведен в листинге 7.3, а результат — на рис. 7.3.

Листинг 7.3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>flMHaMM4ecKMe cTnrm</title>
<script language="javascript">
<! —
function chan_cont(x)
{
if (x==l) {pi.className="visible"; p2.className="hidden"};
if (x==2) {p2.className="visible"; pi.className="hidden"};
}
//-->
</script>
<style type="text/css">
.visible {visibility: visible}
.hidden (visibility :hidden} </style> </head> <body>
<table border=2 id="tablel"> <tr>
<td>
<р>Первая 3aM6TKa<input type="radio" name="groupl" onClick="chan_cont (1) " value="l" checkedx/p>
<р>Вторая 3aM6TKa<input type="radio" name="groupl" onClick="chan_cont (2) " value="2"x/p>
</td>
<td>
<p id="pl" class="visible">TeKCT первой заметки</р>
</td>
<td>
<p id="p2" class="hidden">TeKCT второй заметки</р>
</td> </tr> </table> </body> </html>

Рис. 7.3. Окно браузера с результатом отображения файла приведенного в листинге 7.3, в тот момент, когда пользователь активизировал второй переключатель

Теперь рассмотрим структуру HTML-кода созданной нами Web-страницы. Функционально код разбивается на три части: программа-скрипт, стилевая таблица и содержимое документа. Начнем со стилевой таблицы.
Легко заметить, что мы объявляем два класса с селекторами visible и hidden. Правила отображения для этих классов чрезвычайно просты. В обоих случаях мы явно устанавливаем видимость элементов, входящих в тот или иной класс при помощи свойства visibility, которое отвечает за видимость элемента данного класса. Соответственно, класс visible будет отображаться в окне просмотра, а класс hidden — нет.
Содержимое страницы полностью "упаковано" в таблицу. В первой ячейке размещены два переключателя. Так как нам не придется передавать данные об их состоянии обрабатывающей программе на сервер, мы с успехом обходимся без формы, создаваемой при помощи тега <form>. Для каждого переключателя мы установили обработку события onclick, возникающего при щелчке мышью на данном переключателе. Так как щелчок мыши по переключателю вызывает изменение ее состояния, то, казалось бы, можно для этих целей воспользоваться и событием onchange. Однако здесь решающую роль играет тот факт, что событие onclick передается вверх по объектной иерархии до объекта document, a onchange — нет. Дело в том, что событие onclick для объекта document инициирует его обновление в окне просмотра браузера, если содержимое данного объекта было изменено каким-либо образом. То есть, если бы мы воспользовались событием onchange, то видимые изменения в отображении документа происходили бы только после того, как пользователь дополнительно бы щелкал мышью где-либо кроме переключателей.
Для обработки щелчка мышью на обоих переключателях мы используем одну и ту же функцию с наименованием chan_cont, которая объявлена в программе-скрипте. В качестве параметра для этой функции мы передаем порядковый номер заметки, которую необходимо сделать видимой. А затем в теле функции, в зависимости от переданного параметра мы меняем идентификаторы классов у заметок, пользуясь их уникальными идентификаторами, созданными при помощи параметров id. Для того, чтобы изменить наименование класса, мы пользуемся свойством className.
Впрочем, мы можем использовать более радикальный вариант динамического стилеобразования. Так, мы обладаем возможностью создать несколько полноценных стилевых таблиц, внедренных в HTML-документ, а затем в зависимости от обстоятельств менять их. Очень часто этой возможностью пользуются для создания так называемых "скинов" сайта, т. е. для всех Web-страниц сайта создается одинаковый набор стилевых таблиц, которые полностью определяют их внешний вид. А затем удаленному пользователю предоставляется возможность выбрать именно тот вариант оформления сайта, который ему больше всего нравится. Идентификатор соответствующей стилевой таблицы записывается в строку cookie-информации. Затем, при следующем посещении сайта, скрипт получает эту cookie-информацию, записанную в локальной системе удаленного пользователя, и на ее основе активизирует ту или иную стилевую таблицу. При создании подобного сценария следует учесть тот факт, что многие браузеры позволяют запретить создание cookie-записей на машине пользователя, следовательно, по умолчанию должна использоваться одна из стандартных стилевых таблиц.
Попробуем создать подобный документ. Мы не будем встраивать в него обработку cookie-информации, так как для ее создания и записи надо создавать специализированную форму. Мы ограничимся просто прямым выбором того или иного варианта оформления Web-страницы при помощи переключателей. Код подобного HTML-документа приведен в листинге 7.4.

Листинг 7.4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<1;11;1е>Динамические стили</1:11:1е> <style id="stylel" type="text/css">
hi {color:red}
p {font-family:"Courier New"} </style> <style id="style2" type="text/css">
hi {color:blue}
p {font-family:"Times New Roman"}
</style>
<script language="javascript">
function chan_style(x)
if (x==l) {stylel.disabled=true; style2.disabled=false}; if (x==2) {style2.disabled=true; stylel.disabled=false};
I
// —>
</script>
</head> <body>
<р>Первый стиль o<$opwieHHH<input type="radio" name="groupl' onClick="chan_style (1) " value="l" checkedx/p>
<р>Второй стиль oфopмлeния<input type="radio" name="groupl'
onClick="chan_style (2) " value="2"x/p>
. <п!>3аголовок первого уровня</п!>
<р>Пример обычной строки текста</р> </body> </html>

Рис. 7.4. Окно браузера с результатом отображения файла, приведенного в листинге 7.4, в тот момент, когда пользователь активизировал второй переключатель

Сама структура документа практически не претерпела изменений по сравнению с предыдущим документом. Только теперь мы использовали два тега <styie> с двумя взаимоисключающими наборами правил отображения обычного текста и заголовков первого уровня. Для каждого такого тега мы задаем уникальный идентификатор. При загрузке HTML-документа, браузер изначально использует вторую стилевую таблицу, так как она полностью перекрывает область действия первой стилевой таблицы, будучи загруженой после нее.
После изменения состояния переключателей в дело вступает программа-скрипт. Для того, чтобы активизировать одну стилевую таблицу и отключить другую, используется свойство disabled, присущее тегам <styie>. Его значением, как хорошо видно в тексте, является логическое выражение. В зависимости от переданного в функцию значения, мы отключаем одну стилевую таблицу и подключаем другую (рис. 7.4).
В самом начале данного раздела мы уже говорили, что можем воспользоваться объектом style, который входит в стандартную объектную иерархию DHTML. Этот объект присущ всем тегам в качестве встроенного свойства. Рассмотрим простейший пример его применения (рис. 7.5).

Листинг 7.5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htm!4/strict.dtd">
<html> <head>
<title>flMHdMM4ecKMe CTi«iJi</title> <script language="javascript"> <! —
function chan_style() {
pi.style.backgroundColor="blue" ; pi.style.color="white" ; }
//--> </script> </head> <body>
<p id="pl" onMouseover="chan_style()">Пример обычной строки текста</р> •
</body>
</html>

Рис. 7.5. Окно браузера с результатом отображения файла, приведенного в листинге 7.5, в тот момент, когда пользователь навел курсор мыши на текстовую строку

Механизм подключения скрипта к единственному абзацу, расположенному на нашей демонстрационной Web-странице, уже должен быть вполне понятен. Единственное место в данном HTML-документе, которое следует несколько внимательнее рассмотреть — это тело функции, обрабатывающей событие onMouseover. В ее коде видно, что мы воспользовались объектом style, а точнее, его несколькими свойствами. По аналогии с технологией CSS легко догадаться, что свойство backgroundcoior устанавливает цвет фона, а свойство color — цвет шрифта. Однако хотелось бы точно знать, какими свойствами обладает объект style, и какие параметры CSS они дублируют. В табл. 7.8 перечислены все свойства объекта style.

Таблица 7.8. Свойства объекта style

Наименование свойства
Описание свойства
background
Задает URL графического изображения, использующегося в качестве фона для элемента
backgroundAttachment
Определяет механизм прокручивания фонового изображения вместе с содержимым элемента
backgroundColor
Задает цвет фона
background Image
Содержит URL графического изображения, используемого в качестве фона
backgroundPosition
Определяет координаты левого верхнего угла фонового изображения
backgoundPositionX
Устанавливает горизонтальную координату верхнего левого угла фонового рисунка
backgoundPositionY
Устанавливает вертикальную координату верхнего левого угла фонового рисунка
backgroundRepeat
Задает механизм повторения фонового изображения на пространстве, занимаемом элементом, если это пространство больше по размерам, чем применяемое графическое изображение
border
Задает стиль отображения границы вокруг элемента
borderBottom
Определяет параметры отображения нижней границы элемента
borderBottomColor
Задает цвет нижней границы элемента
borderBottomStyle
Задает стиль линии нижней границы элемента
borderBottomWidth
Устанавливает ширину нижней границы элемента
borderColor
Задает цвет границы элемента
BorderLeft
Определяет параметры отображения левой границы элемента
border LeftColor
Задает цвет левой границы элемента
borderLeftStyle
Задает стиль линии левой границы элемента
borderLeftWidth
Устанавливает ширину левой границы элемента
borderRight
Определяет параметры отображения правой границы элемента
border Right Color
Задает цвет правой границы элемента
borderRight Style
Задает стиль линии правой границы элемента
borderRightWidth
Устанавливает ширину правой границы элемента
borderStyle
Указывает стиль линий границы элемента
borderTop
Определяет параметры отображения верхней границы элемента
borderTopColor
Задает цвет верхней границы элемента
borderTopStyle
Задает стиль линии верхней границы элемента
borderTopWidth
Устанавливает ширину верхней границы элемента
borderWidth
Указывает ширину границы элемента
clear
Указывает порядок позиционирования и выравнивания содержимого элемента
clip
Задает порядок отображения содержимого элемента, если оно по размерам превосходит пространство, отведенное элементу в окне просмотра браузера
color
Задает цвет элемента
cssText
Содержит текстовое значение атрибута style, внедренного в тег
cursor
Задает тип курсора мыши, который будет отображаться в то время, когда он будет находиться над элементом
display
Определяет, будет или нет отображаться данный элемент в окне просмотра браузера
filter
Указывает на набор всех графических фильтров, которые применялись к данному элементу
font
Задает свойства шрифта, которым будет отображаться текстовое содержимое элемента
font Family
Устанавливает шрифт, которым будет отображаться текст
fontSize
Задает размер используемого шрифта
fontStyle
Указывает начертание применяемого шрифта
fontVariant
Задает способ отображения строчных символов
fontWeight
Устанваливает ширину линий, которыми отображаются символы шрифта
height
Задает высоту элемента
left
Устанавливает горизонтальную координату верхнего девого угла элемента
letterSpacing
Задает межсимвольное расстояние
lineHeight
Устанавливает межстрочный интервал
listStyle
Указывает способ отображения элементов списка
listStylelmage
Задает графическое изображение для создания маркера
listStyle Position
Устанавливает расположение маркеров элементов списка
listStyleType
Указывает, какой тип стандартных маркеров будет использоваться в данном элементе
margin
Определяет внешний вид полей элемента
marginBottom
Задает размеры нижнего поля элемента
MarginLeft
Задает размеры левого поля элемента
MarginRight
Задает размеры правого поля элемента
marginTop
Задает размеры вержнего поля элемента
overflow
Определяет правило отображения содержимого элемента, переполняющего выделенное для него пространство
paddingBottom
Определяет размер отступа между содержимым элемента и его нижней границей
paddingLeft
Определяет размер отступа между содержимым элемента и его левой границей
paddingRight
Определяет размер отступа между содержимым элемента и его правой границей
paddingTop
Определяет размер отступа между содержимым элемента и его верхней границей
pageBreakAfter
Устанавливает разрыв страницы перед элементом
pageBreakBefore
Устанавливает разрыв страницы после элемента
pixelHeight
Содержит численное значение высоты элемента в пикселах
pixelLeft
Содержит численное выражение горизонтальной координаты верхнего левого угла элемента в пикселах
pixelTop
Содержит численное выражение вертикальной координаты верхнего левого угла элемента в пикселах
pixelWidth
Содержит численное значение ширины элемента в пикселах
position
Определяет применяемую модедь позиционирования элемента
posLeft
Содержит числовое значение горизонтальной координаты левого верхнего угла элемента в единицах измерения, заданных в последнюю очередь
posTop
Содержит числовое значение вертикальной координаты левого верхнего угла элемента в единицах измерения, заданных в последнюю очередь
posWidth
Содержит числовое значение ширины элемента в единицах измерения, заданных в последнюю очередь
styleFloat
Задает стиль расположения содержимого элемента
textAlign
%
Устанавливает выравнивание текстового содержимого элемента
text Decor at ion
Устанавливает способ отображения текста
textlndent
Устанавливает отступ первой строки абзаца
textTransform
Задает стиль отображения различных регистров шрифта
top
Содержит вертикальную координату верхенго левого угла элемента
verticalAlign
Задает вертикальное выравнивание элемента
visibility
Регулирует видимость данного элемента
width
Задает ширину элемента
zlndex
Устанавливает псевдовертикальное позиционирование элемента

Руководствуясь этой таблицей, мы получаем доступ ко всем свойствам стилевого оформления для каждого элемента содержимого Web-страницы. Таким образом, при помощи технологии DHTML мы получаем контроль над свойствами отображения любого элемента Web-страницы.

Позиционирование элементов Web-страницы

Одним из наиболее используемых преимуществ DHTML является возможность точно позиционировать элементы оформления Web-страницы. Как мы помним, в самом HTML у нас отсутствует возможность четкого позиционирования каких-либо элементов Web-страниц. Технология DHTML исправляет этот недостаток. Более того, DHTML позволяет не только четко устанавливать место отбражения того или иного элемента, но и перемещать его в окне просмотра браузера. Подобная возможность обычно называется "динамическим позиционированием ".
Всего используется три типа позиционирования. Различают статическое позиционирование, относительное и абсолютное. Статическое позиционирование — это порядок размещения элементов Web-страниц самим браузером, исходя из обычных стандартов HTML. Относительное позиционирование позволяет изменять расположение элемента, опираясь на его исходное расположение. То есть, его смещение отсчитывается от исходных координат. На основе относительного позиционирования обычно создают различные эффекты анимации текста. А абсолютное позиционирование позволяет нам указывать кооцдинаты элементов, относительно окна браузера. То есть, мы можем точно знать в каждый момент времени, в какой точке окна просмотра находится тот или иной элемент. Чаще всего для эффектов динамического позиционирования используется именно эта разновидность.
Необходимо осознавать, что статическое позиционирование полностью опирается на порядок расположения элементов, который указан в HTML-коде и умолчаниях браузера. Но если мы для какого-либо элемента установим абсолютное позиционирование, то он уже не будет учитываться браузером при размещении остальных элементов. Он как будто вынимается из процедуры статического позиционирования и не оказывает никакого влияния на соседние элементы.
Теперь от теории перейдем к практике. Попробуем создать HTML-документ, в котором текстовый абзац мог бы изменять свое расположение в тот момент, когда пользователь наводит на него курсор мыши. Код подобного документа приведен в листинге 7.6.

Листинг 7.6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www.w3.org/TR/html4/strict.dtd">
<html> <head>
<1;11:1е>Динамическое позиционирование</1:^1е>
<script language="javascript">
<! —
function moving()
{
pi. style.position="relative";
pi.style.top="10px";
pi.style.left="10px";
}
function reverse ()
{
pi.style.position="static";
}
II —>
</script>
</head>
<body>
<p><font з1ге=5>Первый a63au</fontx/p>
<p id="pl" onmouseover="moving()" onmouseout="reverse()"xfont з1ге=5>Второй a63au</fontx/p>
</body> </html>

Рис. 7.6. Окно браузера с результатом отображения файла, приведенного в листинге 7.6, в тот момент, когда пользователь навел курсор мыши на второй абзац

При загрузке в браузер этого файла будет видно, что при попадании курсора мыши на второй абзац, тот сдвигается вправо и вниз, а после того, как курсор мыши покидает его, абзац возвращается к своему исходному положению (рис. 7.6).
Теперь рассмотрим код, чтобы узнать, за счет чего мы можем добиться подобного эффекта. Как видно, мы установили идентификатор для второго абзаца, и две функции, выполняемые при наступлении событий
onmouseover И onmouseout.
Событие onmouseover, наступающее в тот момент, когда пользователь наводит курсор мыши на второй абзац, мы обрабатываем при помощи функции moving. В этой функции мы изменяем некоторые свойства объекта style для элемента с идентификатором pi. Использование объекта style мы обсуждали в предыдущем разделе этой главы. Сейчас нас интересует именно механизм перемещения содержимого абзаца. Мы использовали три свойства: position, top и left. Свойству position мы придали значение relative, которое позволяет нам смещать расположение элемента относительно его начального размещения. После того достаточно было изменить значения свойств top и left, и абзац изменил бы свое расположение. В нашем примере мы использовали для этих свойств одно и то же значение — Юрх. Это позволяет смещать абзац вниз и влево одновременно на десять пикселов.
Но после того, как мы сместили абзац, было бы неплохо вернуть его на место. Возврат осуществляется при пернмещении пользователем курсора мыши с территории, занимаемой выбранным текстовым абзацем. Следовательно, необходимо обрабатывать событие onmouseout. Для этих целей мы внесли в наш
скрипт функцию reverse. Она также работает с объектом style. Но для того, чтобы вернуть абзац к его начальному положению, достаточно всего лишь придать свойству position значение static. Мы уже знаем, что при помощи этого значения мы задаем статическое позиционирование для элемента. Следовательно, он будет отображаться именно так, как это было при начальной загрузке страницы. Проще говоря, он вернется на исходное место.
Мы рассмотрели динамическое позиционирование элементов, которое основано на применении относительного типа позиционирования. Но ведь есть еще и абсолютное позиционирование. Оно обычно применяется для создания эффектов позиционирования элементов, не привязанных к их расположению на Web-странице по умолчанию.
В качестве примера мы можем создать страницу, на которой некое слово будет постоянно отображаться в верхнем левом углу окна просмотра браузера, вне зависимости от того, как пользователь прокручивает содержимое документа. Также мы разместим это слово под основным содержимым Web-страницы, применив для этого свойство z-index. В общем случае подобный документ может создаваться при помощи кода, приведенного в листинге 7.7.

Листинг 7.7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
•^^1е>Абсолютное позиционирование<^^1е> <script language="javascript"> <!--
function freezetextO {
freeze.style.posTop=document.body.scrollTop; freeze.style.posLeft=document.body.scrollLeft; }
//--> </script> </head> <body onScroll="freezetext()">
<div id="freeze" style="position:absolute; z_index:-l; top:lpx; left:lpx">
<р>3амороженный текст</р>
</div>
<p><font з!ге=5>Первый a6aau</font></p>
<pxfont size=5>Bтopoй a6aau</font></p>
<pxfont з!ге=5>Третий a63au</font></p> <p><font з!ге=5>Четвертый a63au</fontx/p> <p><font з1ге=5>Пятый a63au</font></p> </body> </html>

Рис. 7.7. Окно браузера с результатом отображения файла, приведенного в листинге 7.7, в тот момент, когда пользователь прокрутил содержимое документа вверх

На рис. 7.7 видно, что при прокрутке содержимого "замороженный текст" все равно остается прикрепленным к верхнему левому углу окна браузера. Попробуем разобраться, за счет чего это происходит.
В листинге данный текст мы заключили в контейнер, создаваемый тегами <div> и </div>. И уже для этого блока-контейнера мы создали стилевое оформление, воспользовавшись параметром style. В объявлении стиля мы установили для блока абсолютное позиционирование блока, задали его координаты и вертикальное псевдопозиционирование при помощи свойства z-index, которому придали значение -1. Это заставит браузер при прокрутке содержимого Web-страницы в окне просмотра всегда отображать наш "замороженный текст" под основным содержимым, так как все остальные элементы офомления Web-страницы имеют по умолчанию нулевое значение этого же свойства, а, следовательно, будут отображаться над "замороженным текстом".
Исходя из условий поставленной задачи, необходимо, чтобы наш текстовый блок постоянно отображался в одном и том же месте — в левом верхнем углу окна просмотра. Координаты, которые мы установили для текстового блока в его определении, указывают его расположение на Web-странице без учета того, какая ее часть помещается в окне просмотра. Поэтому, когда пользователь воспользуется полосами прокрутки, текстовый блок может выйти за пределы окна просмотра. Следовательно, нам необходимо реагиро-
вать именно на использование полос прокрутки пользователем. Для этого мы будем обрабатывать событие onscroil для всего содержимого документа. То есть, нас будет интересовать тег <body>. Поэтому, в коде нашего документе мы и использовали следующее объявление этого тега:

<body onScroll="freezetext()">

Итак, нам необходимо при прокрутке содержимого окна просмотра принудительно отображать текстовый блок в левом верхнем углу окна просмотра браузера. Для этих целей мы пользуемся абсолютным позиционированием. Но для того, чтобы позиционировать блок текста, нам необходимо знать, какие координаты документа соответствуют верхнему левому углу окна просмотра. И здесь следует вспомнить о свойствах scroiiTop и scroiiLeft элемента body, которые содержат координаты этого верхнего левого угла окна просмотра в системе координат самого документа. Эти координаты мы и присвоили значениям posiop и posLeft, соответственно, которые задают координаты верхнего левого угла текстового блока.
Естественно, подобную технологию мы можем применять не только к текстовым блокам, но и практически к любым элементам наполнения Web-страниц, в том числе и к графическим изображениям, и к их более продвинутой версии — видеовставкам.

Обработка форм

Как мы знаем, чаще всего формы с их органами ввода данных, применяются для того, чтобы передавать информацию, введенную пользователем, обрабатывающей программе, которая расположена на каком-либо Web-сервере. Так как все скрипты, которые мы используем в DHTML, в силу своей природы выполняются в браузере удаленного пользователя, обработка форм средствами DHTML, казалось бы, невозможна. На самом деле, все немножко не так.
В предыдущих разделах главы мы уже видели примеры работы с органами ввода информации. При этом их даже необязательно было включать в формы. Более того, когда мы рассматривали объекты, создаваемые теми или иными элементами содержимого Web-страниц, то обращали внимание, что теги объявления форм и создания органов ввода информации тоже входят в объектную модель DHTML. Следовательно, мы имеем возможность работать с ними при помощи программ-скриптов.
Очень часто скрипты используют для проверки информации, вводимой пользователем, на соответствие некоторым условиям. Например, одно из полей текстового ввода предназначено для указания возраста удаленного посетителя. Естественно, разработчик Web-страницы ожидает, что туда будут вноситься только цифры. Но далеко не всегда так происходит.
Обязательно найдется человек (и далеко не один), который внесет в это поле ввода несоответствующую информацию просто из любопытства или по ошибке. Естественно, при отсылке введенных данных ничего произойти не должно. А если программа-анализатор, которая принимает эти данные из формы, спроектирована правильно, то она проверит введенное значение, и в том случае, если оно не входит в установленные разумные рамки (возраст не может быть отрицательным, более 100 лет и т. п.), сгенерирует Web-страницу, на которой будет указано, что была введена некорректная информация, и отправит ее в браузер удаленного пользователя. Но на все это необходимо время. Время для передачи данных на сервер, время для их обработки, и время для передачи созданной Web-страницы от сервера обратно к удаленному пользователю. А если процедуру проверки введенных данных мы встроим в саму Web-страницу, используя для этих целей технологию DHTML, то временной задержки можно будет избежать. В листинге 7.8 приведен пример кода подобного HTML-документа.

Листинг 7.8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>06pa6oTKa <?opM</title>
<script language="javascript">
<! —
function checkdata()
{
if ((event.keyCode<48) I I (event.keyCode>57)) event.returnValue=false
}
//-->
</script>
</head>
<body>
<form>
<p> Возраст <input type="text" onKeyPress="checkdata()"></p>
</form> </body>
</html>

Рис. 7.8. Окно браузера с результатом отображения файла, приведенного в листинге 7.8.

В этом HTML-документе мы создаем форму с одним полем текстового ввода (рис. 7.8). Данное поле предназначено для ввода возраста удаленного пользователя. Естественно, возраст может быть лишь числовым значением. Поэтому при помощи программы-скрипта мы просто блокируем ввод символов, не являющихся цифрами. Известно, что коды цифровых символов лежат в промежутке между 48 и 57. Этим фактом мы и воспользуемся.
Мы будем обрабатывать событие onKeypress для поля ввода текстовой информации. То есть, мы перехватываем нажатие каждой клавиши, когда фокус ввода передан полю ввода. Коды нажатых пользователем клавиш мы получаем при помощи свойства keyCode объекта event. А после этого остается лишь проверить, что эти коды находятся в оговоренном промежутке допустимых в данном случае значений. И если это не так, следовательно, пользователь нажал не цифровую клавишу. В этом случае мы используем returnvalue все того же объекта event. Введенный символ отображается в поле текстового ввода после того, как событие onKeypress возвратит его код. Если же мы присваиваем свойству returnvalue значение false, то возврата значения не произойдет. Следовательно, и введенный символ не будет отбражаться в поле ввода. Именно на этом механизме и основано действие скрипта, внедренного в HTML-документ, код которого приведен в листинге 7.8.
Однако одной проверки вводимых символов в соответствующее поле может и не хватить. Возраст человека должен быть правдоподобным. В текущем варианте ничто не помешает человеку внести в поле ввода значение, состоящее, например, из пяти цифр. Понятно, что полученное число будет иметь весьма отдаленное отношение к реальному возрасту удаленного пользователя. Поэтому было бы неплохо после ввода числа пользователем проверить, что оно находится в промежутке между, скажем, десятью и девяноста. Код документа с подобным скриптом приведен в листинге 7.9.

Листинг 7.9

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>06pa6oTKa <$opM</title> <script language^"javascript"> <! —
function checkdata() {
if ((event.srcElement.value<10)||(event.srcElement.value>90) alert("Введите правильный возраст");
} //-->
</script> </head> <body> <form>
<p> Возраст <input type="text" name="fl" onChange="checkdata ( ) "></p>
<p> Имя и фамилия <input type="text" name="f 2"></p> <p><input type="submit" value="OTnpaBHTb"x/p> </form> </body> </html>

В этом документе для проверки значения, введенного пользователем, мы используем событие onChange, которое инициируется после того, как пользователь перейдет от поля ввода к какому-либо другому органу правления Web-страницы. То есть, это событие отрабатывается непосредственно перед событием onBlur.
Итак, пользователь ввел некоторое значение в интересующее нас поле. Теперь мы перехватываем событие onChange и проводим проверку введенного значения. Значение мы получаем в качестве свойства value. Доступ к текущему полю получим при помощи свойства srcElement объекта event. А затем остается при помощи условного оператора if проверить, удовлетворяет ли введенное значение необходимым условиям. В том случае, если значение не удовлетворяет наложенным условиям, мы при помощи оператора alert отображаем информационное окно с соответствующим текстом (рис. 7.9).
При помощи подобной технологии мы можем проверять все вводимые пользователем данные на соответствие неким условиям, которые определяются разработчиком Web-страницы. Как мы уже говорили, это помогает избежать досадных ошибок, которые неизбежно будут возникать из-за невнимательности пользователей, без дополнительного обращения к приложению, обрабатывающему данные.

Рис. 7.9. Окно браузера с результатом отображения файла, приведенного в листинге 7.9, после того как пользователь внес неправильное значение в поле ввода

Но рассмотренные нами способы работы с формами и органами ввода не исчерпывают весь спектр возможностей DHTML в этой области. Мы можем динамически изменять содержимое формы в зависимости от действий пользователя.
Предположим, что нам необходимо провести на сайте некий опрос. При этом для мужчин и женщин используются различные наборы вопросов. Мы можем либо создать две отдельные Web-страницы, одну для мужчин и одну для женщин, с наборами вопросов, и два приложения, обрабатывающих эти формы. А можем при помощи DHTML модифицировать одну и ту же Web-страницу в зависимости от указанного пола удаленного пользователя. Код подобного HTML-документа приведен в листинге 7.10.

Листинг 7.10

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www.w3.oi;g/TR/html4/strict.dtd">
<html> <head>
<title>06pa6oTKa <|>opM</title> <script language="javascript"> <! -
function changelist(x) {
if (x==l)
{document.all.selectl.options[0].text="Cmbra"; document.all.selectl.options[1].text="Eлeнa"; docшnent . all . selectl.options[2].text="Лариса"; рЗ. innerText="Bbi6epMTe Ваше любимое женское имя"; }
if (x==2)
{document.all.selectl.options[0].text="Игорь"; document.all.selectl.options[1].text="AneKceu"; document. all. selectl. options [2 ] . text="CXner" ; p3. innerText="Bbi6epnTe Ваше любимое мужское имя"; I } // —>
</script>
</head>
<body>
<form>
<р>Ваш пол: </р>
<р>Мужской <input type="radio" name="groupl" value="male" onClick="changelist (1) " checked></p>
<р>Женский <input type="radio" name="groupl" value="female" onClick="changelist (2) "></p>
<p id="p3">Bbi6epnTe Ваше любимое женское имя</р>
<p><select name="menu" id="selectl">
<option value="l">0льгa</option>
<option value="2">Eлeнa</option>
<option value="3">Лapиca</option>
</select>
</р>
<input type="submit" уа1ие="Подтвердить"> </form>
</body> </html>

Рис. 7.10. Окно браузера с результатом отображения файла, приведенного в листинге 7.10, после того как пользователь выбрал второй переключатель

Итак, рассмотрим механизм изменения содержимого отдельных элементов оформления Web-страницы, инициируемого действиями пользователя. Изменения происходят после того, как пользователь активизирует один из двух переключателей. Для этого мы в определении этих переключателей указали, что событие onclick, возникающее при одиночном щелчке мыши на нем, будет обрабатываться функцией changeiist. В качестве параметра данной функции передается единица или двойка, в зависимости от выбранного удаленным пользователем варианта.
Теперь рассмотрим принцип действия функции changeiist. Она призвана изменять содержимое выпадающего списка имен. Также, она изменяет текст, отображаемый перед этим списком. По умолчанию мы создали Web-страницу, ориентированную на мужчин. Как только пользователь при помощи соответствующего переключателя указывает, что он является женщиной, программа-скрипт изменяет список имен, вставляя туда мужские имена, и модифицирует текстовую строку перед этим списком (рис. 7.10). Естественно, необходимо учесть и тот вариант, что пользователь может несколько раз изменять свой выбор, активизируя тот или иной переключатель. Именно поэтому функция changeiist состоит из двух блоков, динамически изменяющих часть формы в зависимости от выбора удаленного пользователя.
Для того чтобы изменить имена в выпадающем списке, мы используем кон-стукцию следующего вида:

document.all.selectl.options[0].text

Идентификатор нашего выпадающего списка — seiecti. В данном случае мы осуществляем доступ к нему через коллекцию all объекта document. В самом этом объекте выпадающего списка есть коллекция options, в которой содержатся все пункты выпадающего списка. Доступ к ним осуществляется при помощи указания их номера в квадратных скобках.

Внимание
Необходимо учитывать, что нумерация в коллекциях ведется с нуля.

В элементах списка мы меняем только текст, отображаемый в окне просмотра. Значение, передаваемое в обрабатывающую программу не модифицируем. А для того, чтобы изменить текст элементов списка, мы воспользовались соответсвующим свойством text.
Также изменению подвергался текст абзаца с идентификатором рз. Для того, чтобы изменить его текстовое содержимое, мы воспользовались свойством innerText, присущим данному элементу. Данное свойство содержит только текст, находящийся между граничными тегами данного элемента.

Графические фильтры

Пожалуй, самой необычной возможностью технологии DHTML является использование так называемых "графических фильтров". Это, по сути, некоторые графические преобразования, которые могут быть применены избирательно к любому элементу оформления Web-страницы. Изначально эти фильтры создавались на основе элементов ActiveX, и, соответственно, наилучшим образом они работают в браузере Microsoft Internet Explorer.
Обычно различают статические и динамические фильтры. Любой статический графический фильтр просто проводит мгновенное преобразование элемента содержимого Web-страницы, к которому он применяется. Динамические фильтры преобразование проводят в течение некоторого времени, что позволяет увидеть этот процесс "в динамике". Чаще всего при разработке Web-страниц используют статические фильтры, так как динамические графические фильтры адекватно поддерживаются далеко не всеми браузерами. Поэтому и рассмотрим мы именно работу со статическими графическими фильтрами.
Доступ к объектам графических фильтров обычно производится при помощи коллекции filters, которая является свойством практически каждого объекта, соответствующего тому или иному элементу содержимого Web-страницы. Естественно, из самого наличия коллекции объектов, следует тот
факт, что к одному элементу можно применять несколько графических фильтров. Также можно воспользоваться свойством style, которое в свою очередь обладает подсвойством filter.
Приведем пример HTML-документа с использованием одного из статических фильтров, чтобы на этом примере рассмотреть механизм их применения.

Листинг 7.11

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
f <title>Tpa<J>M4ecKMe (J>i^bTpbi</title>
<script language="javascript">
<!-
function filtering()
{
document.all.pi.style.filter="xray";
} //-->
</script>
</head>
<body>
<p><img id="pl" src="redhood.gif" onClick="filtering()"></p> </form> </html>

На рис. 7.11 видно, во что превратился рисунок gif-формата из двухсот пятидесяти шести цветов после того, как пользователь щелкнул мышью на графическом изображении. После этого щелчка к рисунку был применен статический графический фильтр с наименованием "хгау", которое, очевидно, указывает, что данный графичекий эффект имеет некоторое отношение к рентгеновским лучам. И если посмотреть на рисунок, станет понятно, что доля истины в этом названии есть, так как графическое изображение и в самом деле немного походит на рентгеновские снимки.
Активация фильтра происходит при помощи свойства filter у объекта style, являющегося составной частью объекта, реализующего графическое изображение. Доступ к этому объекту происходит при помощи уникального идентификатора элемента, через коллекцию all.
Итак, мы видели результат применения фильтра "хгау" к обыкновенному графическому изображению. Однако, осталось еще двенадцать статических фильтров, наименований которых мы не знаем. Более того, нам неизвестны также преобразования, которые они производят с тем или иным элементом содержимого Web-страницы. Поэтому следует рассмотреть способы работы с этими статическими фильтрами.

Рис. 7.11. Окно браузера с результатом отображения файла, приведенного в листинге 7.11, после того как пользователь щелкнул мышью на рисунке

Начнем с простых фильтров отражения. Фильтр с наименованием "fliph" задает горизонтальное отражение элемента. Код HTML-документа, в котором используется данный фильтр приведен в листинге 7.12.

Листинг 7.12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>rpa<$M4ecioie <|>^bTpbi</title> <script language="javascript"> <!-function filtering()
I
document.all.pi.style.filter="fliph";
}
//-->
</script>
</head> <body>
<pximg id="pl" src="htm.gif" onClick="filtering()"></p> </form> </html>

Рис. 7.12. Окно браузера с результатом отображения файла, приведенного в листинге 7.12, после того
как сработал графический фильтр

Как видно, код документа не слишком отличается от предыдущего листинга. Основное отличие — в механизме действия статического фильтра. Как легко видеть на рис. 7.12, в процессе его применения к рисунку, тот был отражен относительно вертикальной оси, проходящей через его центр.
Существует также фильтр, отражающий содержимое элемента по вертикали. В листинге 7.13 приведен код HTML-документа, использующего данный фильтр.

Листинг 7.13

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Tpa<i>M4ecKMe фильтры<^л^1е>
<script language="javascript">
<!-
function filtering()
{

Рис. 7.13. Окно браузера с результатом отображения файла, приведенного в листинге 7.13, после того как сработал графический фильтр

Из приведенного кода HTML-документа становится ясно, данный статиче ский фильтр носит наименование "flipv". А на рис. 7.13 видно, что данньп фильтр отражает содежимое элемента Web-страницы по вертикали, относи тельно горизонтальной оси элемента, проходящей через его центр.
Все три рассмотренных нами фильтра обладают одной общей чертой — от не нуждаются в дополнительных параметрах. Однако далеко не все статиче ские графические фильтры так нетребовательны. Большинство из них тре бует указания дополнительных параметров. Пример применения подобной графического фильтра показан в листинге 7.14.

Листинг 7,14

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

Рис. 7.14. Окно браузера с результатом отображения файла, приведенного в листинге 7.14, после того как сработал графический фильтр

Листинг 7.15

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Гpaфичecкиe фильтpы</title> <script language="javascript"> <!-
function filtering() {
document.all.pl.style.filter="invert"; }
//--> </script> </head> <body>
<p><img id="pl" src="htm.gif" onClick="filtering()"></p> </form> </html>

Рис. 7.15. Окно браузера с результатом отображения файла, приведенного в листинге 7.15, после того как сработал графический фильтр

Фильтр invert был применен к графическому изображению. Данный фильтр инвертирует, т. е. заменяет на противоположные, все цвета элемента, к котором'у он применяется. На рис. 7.15, однако, видно, что был изменен лишь цвет значимой части изображения, а фон остался неизмененным. Связано это с тем, что применяющееся в данном случае графическое изображение было сохранено в формате GIF, и фон его был обозначен как "прозрачный" цвет. Эта уникальная фозможность присуща только данному формату. И при применении фильтра invert всегда следует помнить, что прозрачный цвет не поддается инвертированию.
Существует также фильтр mask, чье действие весьма похоже на только что рассмотренный фильтр. Но фильтр "mask" не инвертирует цвета элемента, а делает, так называемую, "маску". То есть, фон изображения переводится в специально заданный разрабочиком цвет, а основной план изображения переводится в белый цвет. Пример использования подобного эффекта показан в листинге 7.16 и рис. 7.16.

Листинг 7.16

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>rpa<?M4ecKMe фильтpы</title> <script language="javascript"> <!-
function filtering() {
document.all.pl.style.filter="mask(color=green) ' } //-->
</script>
</head>
<body>
<pximg id="pl" src="htm. gif " onClick="f iltering ( ) "></p> </form> </html>

Легко заметить, что для установки цвета, которым будет отображаться создаваемая маска, мы используем параметр с наименованием color. Значением параметра может быть любое принятое в HTML обозначение цвета. Если не использовать дополнительный параметр для эффекта, то в качестве цвета для создания маски будет использован черный цвет.
Способ применения еще одного графического фильтра показан в листинге 7.17. Фильтр с наименованием "blur" несколько "размазывает" отбражае-мый элемент, создавая эффект его движения.

Рис. 7.16. Окно браузера с результатом отображения файла, приведенного в листинге 7.16, после того
как сработал графический фильтр

Листинг 7.17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Гpaфичecкиe фильтpы</title> <script language="javascript"> <! -function filtering()
{
document.all.pi.style.filter="blur(add=l, direction=90, strength=20)";
} //-->
</script>
</head>
<body>
<p><img id="pl" src="htm. gif " onClick="f iltering ( ) "></p> </form> </html>

К сожалению, возможности полиграфии не позволяют показать результат применения данного фильтра в полном объеме. Но если все-таки есть желание увидеть его, стоит создать HTML-файл с кодом, приведенным в листинге 7.17, и загрузить его в браузер (рис. 7.17).

Рис. 7.17. Окно браузера с результатом отображения файла, приведенного в листинге 7.17, после того как сработал графический фильтр

Легко заметить, что данный эффект обладает тремя дополнительными параметрами. Параметр direction задает направление, в котором будет производиться смещение изображения элемента. Значением данного параметра является число, обозначающее количество градусов, отсчитываемых от вертикально направленной воображаемой линии. Параметр strength позволяет указывать, насколько "наполненным" будет смещенное отображение. Чем больше значение этого параметра, тем дальше будет смещаться изображение. Значением параметра является обычное целое число. Параметр add является логическим и указывает, следует ли добавлять более слабые копии изображения в итоговый результат, создавая подобным образом именно иллюзию движущегося элемента, или нет. Если мы используем нулевое значение, то ослабленные копии добавляться не будут, и мы просто получим достаточно сильно размазанное изображение. Чаще всего, опознать в нем оригинал будет затруднительно. Поэтому обычно в качестве значения данного параметра используется любое целое число. При этом не имеет значение, какое число мы используем, лишь бы оно не было нулем, так как, по сути, параметр является логическим.
Графический фильтр с наименованием dropshadow позволяет создавать тень элемента, к которому он применен. Пример HTML-документа, использующего данный фильтр, показан в листинге 7.18.

Листинг 7,18

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title>rpa<|>M4ecKMe <J>i^bTpbi</title>
Ocript language="javascript">
<!-
function filtering()
{
document.all.pi.style.filter="dropshadow(offx=10, offy=10, color=green, positive=l)";
}
//-->
</script>
</head>
<body>
<pximg id="pl" src="htm.gif" onClick="filtering()"></p> </form> </html>

При помощи параметров графического фильтра мы можем управлять внешним видом изображения элемента, к которому данный фильтр применяется. Параметр offx и offy, как нетрудно догадаться, позволяют задавать смещение тени относительно исходного элемента по горизонтали и вертикали, соответственно. Для данных параметров, естественно, используются числовые значения. Параметр color задает цвет, которым будет отображаться тень. А параметр positive является логическим. В том случае, если ему присвоено ненулевое значение, или он вообще не установлен, тень будет отображаться в стандартном виде, как это показано на рис. 7.18. Иначе, тень будет инвертирована, и ее фон будет отображаться цветом, заданным при помощи параметра color, а само теневое изображение элемента будет отображаться цветом фона.

Рис. 7.18. Окно браузера с результатом отображения файла, приведенного в листинге 7.18, после того как сработал графический фильтр

Применение еще одного достаточно интересного статического графического фильтра показано в листинге 7.19. Данный фильтр имеет наименование "glow", и позволяет создавать размазанный контур вокруг элемента, повторяя его контур.

Листинг 7.19

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title>rpa<i>M4ecKMe фильтpы</title>
<script language="javascript">
<!-
function filtering()
{
document.all.pi.style.filter="glow(color=green, strength=10)
}
//-->
</script>
</head>
<body>
<p><img id="pl" src="htm.gif " onClick="f iltering ( ) "></p> </form> </html>

Рис. 7.19. Окно браузера с результатом отображения файла, приведенного в листинге 7.19, после того как сработал графический фильтр

Легко заметить, что данный фильтр обладает двумя параметрами. Параметр color позволяет указывать цвет, которым будет создаваться дополнительный контур элемента, а параметр strength задает размер этого нового контура и, косвенно, его размытость. Чем больше значение этого параметра, тем больше дополнительный обтекающий контур у элемента (рис. 7.19).
При помощи фильтра "alpha" мы можем устанавливать уровень прозрачности для того или иного элемента. Пример использования данного фильтра показан в листинге 7.20 и рис. 7.20.

Листинг 7. 20

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>rpa<$M4ecKMe <fcMnbTpbi</title>
<script language="javascript">
<!-
function filtering()
{
document.all.pi.style.filter="alpha(opacity=40)";
}
//-->
</script>
</head>
<body>
<p><img id="pl" src="htm. gif " onClick="f iltering ( ) "></p> </form> </html>

В качестве знаения основного параметра opacity используется числовое значение от нуля до ста, указывающее процент прозрачности элемента. Если используется нулевое значение, то элемент становится полностью прозрачным и сливается с фоном, т. е. становится невидимым. Если же мы используем значение, равное ста процентам, то внешний вид элемента не изменяется.
Одним из самых интересных фильтров является фильтр "wave", накладывающий на объект волнообразное преобразование. Его применение проиллюстрировано листингом 7.21 и рис. 7.21.

Листинг 7. 21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ' "http: //www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Гpaфичecкиe фильтpы</title> <script language="javascript"> <!-
function filtering() {
document.all.pl.style.filter="wave(freq=3, strength=5, add=0)" } //-->
</script>
</head>
<body>
<p><img id="pl" src="htm.gif " onClick="f iltering () "></p> </form> </html>

Рис. 7.20. Окно браузера с результатом отображения файла, приведенного в листинге 7.20, после того как сработал графический фильтр

При помощи числового параметра freq мы задаем количество "волн" в результирующем изображении. Чем больше значение этого параметра, тем более "волнистым" окажется результат. А "высота" волн, точнее, их горизонтальный размер задается при помощи числового параметра strength. С действием параметра add мы уже знакомы. Если мы укажем для него ненулевое значение, то вместе с результатом действия графического фильтра будет отображает и'исходный элемент. Обычно этот вариант изображения выглядит достаточно громоздко, поэтому чаще используют нулевое значение для параметра add.
И последний рассматриваемый нами статический фильтр носит наименование "light". Он позволяет создавать эффекты освещения элемента различными источниками света, и его стоит рассмотреть несколько подробнее, так как он позволяет использовать несколько различных методов. Мы создадим Web-страницу с одной кнопкой, расположенной по центру строки, и установим реакцию на попадание курсора мыши на нее. В этом случае мы создадим иллюзию возникновения точечного освещения, источник которого будет находиться почти точно над кнопкой. Таким образом, мы сможем акцентировать внимание удаленного пользователя на этой кнопке. Естественно, вместо кнопки можно установить любой другой элемент Web-страницы.

Рис. 7.21. Окно браузера с результатом отображения файла, приведенного в листинге 7.21, после того как сработал графический фильтр

Итак, рассмотрим листинг.

Листинг 7.22

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www.w3.org/TR/html4/strict.dtd">
<html>
<head> <title>rpa<$M4ecKMe фильтpы</title>
<script language=" javascript">
<! —
function lighting()
{
m. style . filter=" light "; l=m.f liters [0] ;
l.addPoint(250,50,150,60,230,60,10000); }
// —>
</script> </head> <body id="m">
<p align="center"xinput type="button" уа1ие="КНОПКА" name="BUTl" onMouseOver="lighting ( ) "></p>
</body>
</html>

В теге HTML-документа мы создаем одну кнопку, установленную по центру строки (рис. 7.22). Для нее устанавливаем отслеживаемое событие onMouseOver, и приписываем ему выполнение функции lighting о. В самой функции мы работаем с объектом т, который является телом документа. Мы используем его подчиненный объект style и создаем для него графический фильтр light. При помощи этого графического фильтра можно создавать различные световые эффекты. Затем мы создаем переменную 1, которая становится первым (и единственным) экземпляром коллекции filters. А для нее выполняем метод addPoint, который создает точечный источник цвета. Первые три параметра этого метода содержат в себе координаты х, у и z точечного источника света, следующие три — RGB-код используемого цвета, а последний параметр — интенсивность света.
Необходимо отметить, что каждый раз при выполнении этой функции будет добавляться новый источник освещения. Поэтому, каждый раз при прохождении курсора мыши над кнопкой освещенность будет увеличиваться.
Для фильтра light, помимо метода addPoint, создающего точечный источник света, предусмотрены еще несколько специфичных функций, каждая из которых предназначена для работы с освещением. Метод addAmbient (R, с, в, strength) создает эффект общего освещения. В первых трех параметрах передается RGB-код цвета освещения, а в последнем параметре — интенсивность освещения.
Существует еще и метод, создающий эффект освещения фонариком, коническим пучком света. Этот метод вызывается конструкцией addcone(x, у, z, xi, yi, R, с, в, strength, spread). В первых трех параметрах передаются координаты источника света. Следующие два параметра содержат координаты точки на Web-странице, на которую будет направлен свет. Затем передается RGB-код цвета освещения, интенсивность освещения и величина освещаемого круга.
Для перемещение источника света применяется метод MoveLight (id, x, у, z, absolute). Первым параметром служит идентификатор источника света. Следующие три параметра — новые координаты источника. Последний параметр имеет логический тип. Если передаваемое значение — true, значит, применяемая система координат станет абсолютной, если было передано значение false, то переданные координаты станут использоваться как смещение, и система координат станет относительной. Ее центром будет исходное положение источника света.
Метод ChangeStrengthdd, new_strength, absolute) позволяет динамически менять интенсивность источника света без его явного переопределения. В первом параметре передается идентификатор источника света, во втором — его новая интенсивность, а в третьем — логическое значение, указывающее на характер применяемой системы отсчета. Если передано значение true, то интенсивность становится именно такой, которая указана во втором параметре. Если использовано значение false, то к уже имеющейся интенсивности будет прибавлено значение, переданное во втором параметре.
Для очистки всех фильтров типа light, применяется метод clear о .

Рис. 7.22. Окно браузера с результатом отображения файла, приведенного в листинге 7.22, после того как сработал графический фильтр

 [ Оглавление ]

Партнеры Wmaster
Protoplex.RU
Эскизы татуировок
Поиск по сайту
Объявления
Twitter автора
Карта сайта
Наши баннеры
О проекте

Реклама
(понижение цен)

Об Авторе
Команда
Архив рассылки
 Запомнить эту страницу
Сделать стартовой
Рассылка
Wmaster.ru - всё для вебмастера.
Наша кнопка

Все желающие могут поставить нашу кнопочку к себе на сайт
Всё для веб-мастеров

Партнеры
Бочкарёв Антон
Mail: webmaster[at]wmaster.ru
ICQ: 148780826
Хостинг от Valuehost
© RUscripts.design 2003

© Wmaster Design Group 2001-2008. © Все права защищены. При перепечатке любого материала с сайта  ссылка на http://www.wmaster.ru/  обязательна.