Получение и задание значений атрибутов стиля
Получение или задание значений атрибута стиля, примененного к какому-либо элементу 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-страницы на экран, второе скроет его.
Пример:
Ext.get("cheader").setDisplayed(false);
Ext.get("cheader").setDisplayed("none");
Оба выражения выполняют одно и то же действие — скрывают контейнер cnavbar.
Управление видимостью элементов Web-страницы
Еще библиотека Ext Core предлагает нам несколько методов объекта Element, позволяющих скрывать элементы Web-страницы и снова их показывать.
Метод setVisibilityMode позволяет указать, с помощью какого атрибута стиля будет выполняться скрытие и показ данного элемента Web-страницы: display или visibility. (Эти атрибуты стиля были описаны в главе 9.)
<экземпляр объекта Element>.setVisibilityMode(<имя атрибута стиля>)
Единственным параметром этому методу передается строка с именем нужного атрибута стиля. Мы можем использовать значения свойств Ext.Element.DISPLAY и Ext.Element.VISIBILITY; первое свойство хранит имя атрибута стиля display, второе — visibility.
Пример:
Ext.get("navbar").setVisibilityMode(Ext.Element.DISPLAY);
Если метод setVisibilityMode для данного элемента Web-страницы ни разу не был вызван, для управления видимостью элемента Web-страницы будет использован атрибут стиля visibility.
Метод setVisible скрывает или снова выводит данный элемент Web-страницы на экран:
<экземпляр объекта Element>.setVisible(true|false)
Если методу передано значение true, данный элемент Web-страницы будет выведен на экран, если же передано значение false — он будет скрыт:
Ext.get("navbar").setVisible(false);
Методы show и hide, соответственно, показывают и скрывают данный элемент Web-страницы. Они не принимают параметров:
Ext.get("navbar").show();
Метод toggle скрывает данный элемент Web-страницы, если он присутствует на экране, и выводит на экран, если он скрыт. Он не принимает параметров:
Ext.get("navbar").toggle();
Метод isVisible возвращает true, если данный элемент Web-страницы видим, и false, если невидим. Он не принимает параметров.
Пример:
var elNavbar = Ext.get("navbar");
if (elNavbar.isVisible())
elNavbar.show();
Кроме того, управлять видимостью элемента Web-страницы можно методом setDisplayed, рассмотренным в предыдущем разделе. Этот метод для скрытия и открытия элемента всегда использует атрибут стиля display.
|
