Использование стилей в сценариях

Главное в DHTML – возможность динамически изменять атрибуты стиля, при_ меняемые к отдельным элементам документа, при помощи JavaScript. Стандарт DOM Level 2 определяет прикладной интерфейс (API), позволяющий довольно легко это делать. В главе 15 рассматривалось применение модели DOM API для получения ссылок на элементы документа либо по имени тега или идентифика_ тору, либо рекурсивно с обходом всего документа. Получив ссылку на элемент, стилями которого вы хотите манипулировать, вы устанавливаете свойство style элемента, чтобы получить объект CSS2Properties для данного элемента докумен_ та. Этот JavaScript_объект имеет свойства, соответствующие всем атрибутам

стилей CSS1 и CSS2. Установка этих свойств имеет тот же эффект, что и установ_ ка соответствующих стилей в атрибуте style данного элемента. Чтение этих свойств возвращает значение CSS_атрибута, которое, возможно, было установле_ но в атрибуте style элемента. Описание объекта CSS2Properties вы найдете в чет_ вертой части книги.

Важно понимать, что полученный вами объект CSS2Properties со свойством style элемента определяет только встроенные стили элемента. Невозможно использо_ вать свойства объекта CSS2Properties для получения информации о примененных к элементу стилях из таблицы стилей. Устанавливая свойства для этого объекта, вы задаете встроенные стили, переопределяющие стили из таблицы стилей.

Рассмотрим следующий сценарий. Он находит все элементы <img> в документе и выполняет их перебор в цикле для поиска тех объектов, которые оказываются (судя по их размеру) рекламными баннерами. Найдя баннер, сценарий при по_ мощи свойства style.visibility устанавливает значение CSS_атрибута visibility равным hidden, что делает баннер невидимым:

var imgs = document.getElementsByTagName("img"); // Находим все изображения

Этот простой сценарий можно трансформировать в букмарклет, преобразовав его в URL_адрес со спецификатором javascript: и добавив в закладки броузера (см. раздел 13.4.1).