HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

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

В терминологии Ext Core экземпляры объекта Object, задающие набор параметров для метода, называются конфигураторами.

Пример:

var oConf = { target: "_blank" };

var s = Ext.get("cmain"). select("A"). set(oConf);

Здесь мы задаем для всех гиперссылок в контейнере cmain значение атрибута стиля TARGET, равное "_blank". Для этого мы используем конфигуратор, содержащий свойство target со значением "_blank".

Свойство id возвращает строку со значением атрибута тега ID, т. е. имя элемента

Web-страницы:

var sID = Ext.getBody. child("DIV: last"). id;

Здесь мы получаем имя последнего контейнера на Web-странице — "ccopyright".

К сожалению, задать новое имя для элемента Web-страницы с помощью свойства id мы не сможем. Конечно, можно присвоить этому свойству новое значение, но оно не будет перенесено в атрибут тега ID данного элемента. Так что нам придется воспользоваться методом set:

Ext.getBody. child("DIV: last"). set({ id: "lastdiv" });

ВНИМАНИЕ!

Вообще, менять имя элемента Web-страницы в Web-сценарии — дурной тон программирования. Имя элемента должно задаваться всего один раз — при его создании.

Управление привязкой стилевых классов

Привязка и "отвязка" стилевых классов — одна из самых часто выполняемых в Web-сценариях операций. Было бы странно, если библиотека Ext Core не предоставляла средств для ее выполнения.

Методы объекта Element, которые мы сейчас рассмотрим, выполняют привязку стилевых классов к элементу Web-страницы и удаление их из привязки ("отвязку").

Метод addClass выполняет привязку указанного стилевого класса к данному элементу Web-страницы. Если такой стилевой класс уже есть в привязке, повторная его привязка не выполняется:

<экземпляр объекта Element>.addClass(<имя стилевого класса>)

В качестве параметра данному методу передается строка с именем привязываемого стилевого класса:

Ext.select("P"). addClass("someclass");

Здесь мы привязываем ко всем абзацам на Web-странице стилевой класс someclass.

Метод removeClass удаляет указанный стилевой класс из привязки к данному элементу Web-страницы. Если такого стилевого класса в привязке нет, никаких действий не выполняется:

<экземпляр объекта Element>.removeClass(<имя стилевого класса>)

Параметр данного метода — строка с именем привязываемого стилевого класса:

Ext.select("P"). removeClass("someclass");

Здесь мы удаляем привязанный ранее ко всем абзацам на Web-странице стилевой класс someclass.

Метод toggleClass привязывает заданный стилевой класс к элементу Web- страницы, если он еще не был привязан, и удаляет его из привязки в противном случае:

<экземпляр объекта Element>.toggleClass(<имя стилевого класса>)

Параметр данного метода — строка с именем привязываемого стилевого класса:

Ext.select("P"). toggleClass("someclass");

Метод replaceClass удаляет из привязки к данному элементу Web-страницы указанный стилевой класс и привязывает другой:

<экземпляр объекта Element>.replaceClass(<имя стилевого класса, удаляемого из привязки>, <имя стилевого класса, добавляемого в привязку>)

В качестве параметров этому методу передаются две строки с именами "отвязываемого" и привязываемого стилевых классов:

Ext.select("P"). replaceClass("someclass", "otherclass");

Метод radioClass привязывает указанный стилевой класс к данному элементу Web-

страницы и удаляет его из привязки у всех элементов того же уровня вложенности:

<экземпляр объекта Element>.radioClass(<имя стилевого класса>)

Параметр данного метода — строка с именем привязываемого стилевого класса:

elNavbar.child("UL LI: nodeValue=IMG"). radioClass("hovered");

Здесь мы привязываем стилевой класс hovered к тому пункту вложенного списка, формирующего полосу навигации, который содержит текст "IMG", и удаляем его из привязки у всех остальных пунктов этого же списка.

Метод hasClass возвращает true, если указанный стилевой класс присутствует в привязке к данному элементу Web-страницы, и false в противном случае:

<экземпляр объекта Element>.hasClass(<имя стилевого класса>)

Параметр этого метода — имя стилевого класса:

if (Ext.get("cnavbar"). hasClass("hovered")) {

var s = "К полосе навигации такой стилевой класс не привязан"

else

var s = "И что он там делает?..";

Получение и задание значений атрибутов стиля

Получение или задание значений атрибута стиля, примененного к какому-либо элементу Web-страницы, выполняется тоже весьма часто. В этом случае нам пригодятся несколько методов объекта Element, описанных далее.

Метод getStyle возвращает значение указанного атрибута стиля для данного элемента Web-страницы:

<экземпляр объекта Element>.getStyle(<имя атрибута стиля>)

Параметр данного метода — строка с именем нужного атрибута стиля. Значение этого атрибута стиля возвращается также в виде строки.

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