Использование каскадных таблиц стилей и объекта style

Каждый узел DOM имеет объект style, который описывает стили. Можно изменить, например, цвет шрифта элемента "simpl", document.getElementById("simpl").style.color = red.

Объект style поддерживает ряд свойств, которые можно разде­лить на две группы: задающие стиль документа и относящиеся к самому объекту style. Свойства первой группы аналогичны соответствующим атрибутам стиля и имеют похожие имена. Символы "-" в именах убираются, как не соответстующие соглашению JavaScript. Первые буквы второго, третьего слов, имени атрибута, делаются прописными. Примеры: background-attachment-> backgroundAttachment;border-bottom-color -> borderBottomColor; font-family ->fontFamily; z-index ->zIndex.

По аналогии можно преобразовать все атрибуты стилей в свойства объекта style. Все не относящееся к стилю свойства объекта style пере­числены в таблице.

Свойство	Описание
cssText	текстовое представление стиля (параметр атрибута STYLE).
pixelHeight	Высота элемента в пикселах.
pixelLeft	Смещение левого края элемента в пикселах.
pixelTop	Смещение верхнего края элемента в пикселах.
pixelWidth	Ширина элемента в пикселах.
posHeight	Высота элемента в единицах, в которых она была установлена в определении стиля.
posLeft	Смещение левого края.
posTop	Смещение верхнего края.
posWidth	Ширина элемента.

Объект style позволяет изменить геометрические размеры элемента и его месторасположение, например:

paragraph1.style.fontSize = 7;

image1.style.height = "100mm";

image1.style.width = "120mm";

iamge1.style.top = "200px";

image1.style.left = "50px";

Можно использовать также свойства pos*, принимающие числовые значения в тех единицах, в которых они были заданы в определении стиля.

<IMG src="img1.gif" id="img1" style="height: 100mm; width: 100">

nheight = img1.style.posHeight; // Значение в миллиметрах

nwidth = img1.style.posWidth; // Значение в пикселах

JavaScript и AJAX

Технология AJAX (Asynchronous JavaScript And XML) позволяет соз­давать интерактивные веб-приложения, в которых пересылаемая сервером клиенту страница может полностью не перегружаться, а перегружается лишь часть, содержащая изменившиеся данные. Все новые сервисы Google, в том числе GMail, Orkut, Google Groups, Google Maps, Google Suggest, Google Finance, являются AJAX-приложениями.

Базисом технологии являются: использование модели DOM для обновления содержимого, обмен и обработка данных в виде XML, асинхронные запросы к серверу через интерфейс XMLHttpRequest, использование JavaScript.

Рассмотрим отличия классической модели веб-приложения от AJAX.

Классическая модель веб-приложения:

Пользователь загружает в браузер веб-страницу и вызывает событие.

Браузер отправляет HTTP запрос серверу.

Сервер генерирует страницу - ответ и возвращает ее браузеру.

В браузере отображается новая страница.