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

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-обозревателем.

Пример:

var marginLeft = elNavbar.getStyle('margin-left');

Метод getColor служит для получения значений атрибутов стиля, задающих цвет:

<экземпляр объекта Element>.getColor(<имя атрибута стиля>, <значение цвета по умолчанию>[, <префикс>])

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

Второй параметр — значение цвета по умолчанию. Оно будет возвращено, если метод не смог получить значение указанного атрибута стиля.

Третий, необязательный, параметр — префикс, который добавляется в начале возвращаемого значения цвета. Если данный параметр не указан, в качестве префикса используется символ решетки #.

Метод getColor возвращает RGB-код цвета в знакомом нам формате

<префикс>RRGGBB,

где RR, GG и BB — доля, соответственно, красной, зеленой и синей составляющей. Пример:

var color = Ext.getBody(). getColor('color', '#FFFFFF');

В переменной color окажется строка '#3B4043' — цвет текста наших Web-страниц. Мы не указали третий параметр метода getColor, поэтому возвращенное им значение имеет префикс по умолчанию — #.

Пример:

var color2 = Ext.getBody(). getColor('color', '#FFFFFF', '');

В переменной color2 окажется строка '3B4043'. Третьим параметром мы передали

пустую строку, поэтому возвращенное методом getColor значение не имеет префикса (точнее, имеет — пустую строку).

Метод setStyle задает новое значение для указанного атрибута стиля. Он имеет два формата вызова:

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

Первым параметром в этом случае передается имя нужного атрибута стиля, а вторым — его новое значение. Оба эти значения передаются в виде строк.

Пример:

Ext.getBody(). setStyle('color', 'black');

Здесь мы задаем для цвета текста всей Web-страницы новое значение — black.

Также мы можем передать методу setStyle единственный параметр — конфигуратор. Его свойства должны соответствовать атрибутам стиля, а значения свойств станут новыми значениями этих атрибутов стиля:

<экземпляр объекта Element>.setStyle (<конфигуратор>)

Пример:

Ext.getBody(). setStyle({ color: 'black', background-color: 'white' });

Здесь мы задаем новые значения цвета сразу для текста и фона Web-страницы. Метод setOpacity задает новое значение полупрозрачности для данного элемента

Web-страницы:

<экземпляр объекта Element>.setOpacity(<новое значение>)

Новое значение полупрозрачности передается в виде числа от 0 (полная прозрачность) до 1 (полная непрозрачность):

Ext.get('cheader'). setOpacity(0.5);

Метод clearOpacity делает данный элемент Web-страницы полностью непрозрачным. Он не принимает параметров:

Ext.get('cheader'). clearOpacity();

Метод clearOpacity рекомендуется применять, чтобы сделать элемент Web-страницы непрозрачным. Вызов метода setOpacity с параметром, равным нулю, может не дать ожидаемых результатов в некоторых Web-обозревателях.

Метод setDisplayed задает новое значение атрибута стиля display:

<экземпляр объекта Element>.setDisplayed(<новое значение>)

Этому методу можно передать строку с новым значением атрибута стиля display. Также можно передать значение true или false; первое значение выведет данный элемент Web-страницы на экран,