82 Часть I. Новый взгляд на Web-приложение

2.4.4. Добавление стилей к документу

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

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

Свойство className

Если элементы стилей созданы в результате выполнения кода программы, мы можем воспользоваться свойством className узла DOM. Ниже приведена строка кода, в результате выполнения которой к узлу применяются стили, определенные посредством класса declared.

hello.className='declared' ;

Здесь hello — это ссылка на узел DOM. Таким способом можно связывать с узлом любое количество правил CSS и управлять сложными стилями.

Свойство style

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

С каждым узлом DOM связан ассоциативный массив style, содержащий информацию о стилях, установленных для данного узла. Как видно на рис. 2.4, в массиве стилей DOM-узла обычно содержится большое число элементов. Заметьте, что при присвоении значения свойству className узла автоматически модифицируются значения в массиве style.

Значениями массива style можно управлять непосредственно. Ниже показано, как отобразить рамку вокруг узла empty, задавая его стили.

empty.style.border="solid green 2px"; empty.style.width="200px";

Мы можем определить класс box и применить его посредством свойства className, но в ряде случаев описанный здесь подход проще и позволяет получить результаты быстрее. Кроме того, он позволяет формировать необходимые строки в программе. Если нам надо изменять размеры элементов с точностью до пикселя, то определять стили для значений ширины в интервале от 1 до 800 слишком сложно и неэффективно.

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

НЙ Ь W o r l d !

Рис. 2.4. Данные, соответствующие атрибуту s t y l e DOM-узла и отображаемые с помощью DOM Inspector. Большинство значений было установлено по умолчанию. Обратите внимание на полосу прокрутки: на экране отображается приблизительно четверть всех поддерживаемых стилей

2.4.5. Свойство innerHTML

Описанные выше методы обеспечивают управление структурой D0M на низком уровне. Методы createElement () и appendChild() лучше всего подходят тогда, когда документ имеет регулярную структуру и процедура создания документа легко формализуема. Все популярные браузеры поддерживают также innerHTML — свойство DOM-элементов. Это свойство позволяет без труда включить в состав элемента произвольное содержимое. Значением свойства innerHTML является строка, представляющая дочерние узлы в формате HTML. Используя данное свойство, мы можем переписать функцию addNode следующим образом:

function addListItemUsingInnerHTML(el,text){ el.innerHTML+="<div class='programmed1>"+text+"</div>";

}

Элемент div и содержащийся в нем текстовый узел можно добавить с помощью одного выражения. Заметьте также, что строка не присваивается свойству непосредственно, а добавляется к нему с помощью оператора +=. Чтобы удалить узел путем редактирования свойства innerHTML, надо извлечь значение и организовать его разбор. Свойство innerHTML применимо