|    | 
СИ-БИ техника | КВ техника | УКВ техника | Радиоизмерения | Защита от TVI | Источники питания | Софт | Расчеты | return_links(); ?>
Справочники
Главная arrow Программирование arrow Java arrow Управление внешним видом элементов страницы  

Управление внешним видом элементов страницы

Оглавление
Управление внешним видом элементов страницы
Страница 2
Страница 3
Страница 4
Страница 2 из 4

Пример

Далее приведен HTML-код Web-страницы с абзацем и кнопкой. При нажатии кнопки абзац пропадет со страницы, при повторном нажатии — снова появится на ней.

<HTML> <HEAD>

<TITLE>Скрытие элемента страницы</TITLE> <SCRIPT TYPE="text/javascript"> var flag = true;

function toggleVisibilityO { var pObject = document.all["p"]; var btnObject = document.all["btn"]; if (flag) { pObject.style.visibility = "hidden"; btnObject.value = "Показать"; } else { pObject.style.visibility = "visible"; btnObj ect.value = "Скрыть"; } flag = !flag; } ' </SCRIPT> </HEAD> <BODY>

<P ID="р">Это содержимое страницы</Р> <FORM>

<INPUT TYPE="button" ID="btn" VALUE="Скрыть" ONCLICK="toggleVisibility();"> </FORM> </BODY> </HTML>

Чтобы обозначить, скрыт ли в данный момент наш абзац, мы использовали переменную flag, хранящую логическое значение. Так будет проще и "дешевле".

Как изменить внешний вид

сразу нескольких элементов страницы?

Проблема

А что делать, если мне нужно изменить внешний вид сразу нескольких элементов страницы? Писать код, аналогичный приведенному ранее, для всех этих элементов?

Решение 1 (Internet Explorer и Firefox)

Совсем не обязательно. Можно создать стиль, привязать его ко всем нужным элементам страницы и в сценарии изменить параметры этого стиля.

Чтобы добраться до атрибутов стиля, сначала нужно получить доступ к таблице стилей, в которой он определен. Для этого следует использовать поддерживаемую Internet Explorer и Firefox коллекцию stylesheets, вложенную в объект document. Элементы этой коллекции соответствуют всем таблицам стилей, встроенным и внешним, определенным в данной Web-странице. Например, выражение var ssFirstObject = document.stylesheets[0];

поместит в переменную ssFirstObject экземпляр объекта, соответствующий первой определенной в странице таблице стилей.

Добравшись до таблицы стилей, мы можем получить доступ к нужному нам стилю. Для этого мы используем коллекцию rules (для Internet Explorer) или cssRules (для Firefox), вложенную в объект таблицы стилей. Элементы этих коллекций суть все стили, определенные в данной таблице.

Предположим, что в переменной ssFirstObject находится нужная нам таблица стилей. Тогда получить первый определенный в таблице стиль в Internet Explorer мы можем с помощью выражения

var stFirstObject = ssFirstObject.rules[0];

В Firefox нам придется воспользоваться таким выражением:

var stFirstObject = ssFirstObject.cssRules[0];

После этого в переменной stFirstObject окажется первый стиль этой таблицы.

Получив нужный нам стиль, мы получим доступ к его атрибутам через еще один объект под названием style. Например, выражение

stFirstObject.style.fontSize = "24pt";

задаст для стиля, находящегося в переменной stFirstObject, размер шрифта, равный 24 пунктам.

Народ замечает

Ну вот, на этот раз отличилась Opera... В самом деле, что мешало ее разработчикам сделать в ней поддержку коллекции stylesheets?..

Пример

var piobject = jspsGetProgramlnfо();

if (piObject.programName == JSPS„GPI_MSIE)

document.stylesheets[0].rules[0].style.fontSize = "8pt" else

if (piObject.programName == JSPS_GPI_FIREFOX)

document.stylesheets[0].cssRules[0].style.fontSize = "8pt";

Этот сценарий задаст для первого стиля, определенного в первой таблице стилей, размер шрифта, равный 10 пунктам. Причем это произойдет только в Internet Explorer и Firefox.

Внимание!

Приведенный пример использует функцию j spsGetProgramlnf о, чье объявление приведено в листинге 3.1.

Решение 2

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

Здесь нам помогут следующие свойства экземпляров объектов, представляющих элементы страницы:

className возвращает имя стилевого класса, привязанного к данному элементу страницы;

id возвращает имя элемента, т. е. значение атрибута id;

tagwame возвращает имя тега, создающего данный элемент страницы, без символов < и >.

Народ предупреждает!

Значение, возвращенное свойством tagwame, может быть набрано как маленькими, так и большими буквами, что очень неудобно при сравнении его с эталонным значением. Поэтому нам придется привести его к единообразному виду, воспользовавшись методами toUpperCase или toLowerCase. Первый метод возвращает строку, набранную только большими буквами, второй — строку, набранную маленькими буквами.


« Пред. - След. »


CitRadio.com - Электроника и компьютеры

0.151