| | | | |||
|
|||
|
|
|||
Главная  Программирование Java Управление внешним видом элементов страницы |
|||
Управление внешним видом элементов страницыОглавлениеУправление внешним видом элементов страницы Страница 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. Первый метод возвращает строку, набранную только большими буквами, второй — строку, набранную маленькими буквами. « Пред. - След. » |
Архив статей
СИ-БИ техника
КВ техника УКВ техника Радиоизмерения Защита от TVI Источники питания Софт Расчеты Справочники СИ-БИ техника
|
||
