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

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

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

Начнем с управления внешним видом элементов страницы и создания простейших анимационных эффектов.

Как изменить внешний вид элемента страницы?

Проблема

Мне нужно изменить внешний вид элемента страницы (цвет текста, фона, размеры рамки и др.). Как это делается?

Решение

Все экземпляры объектов, представляющие элементы страницы, содержат вложенный объект style. Свойства этого объекта суть атрибуты стиля CSS, привязанного к данному элементу страницы.

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

Таблица 5.1. Примеры преобразования атрибутов стиля в свойства объекта style

Атрибут стиля

Свойство объекта style

background-attachment

backgroundAttachment

border-bottom-color

borderBottomColor

font-family

fontFamily

z-index

zIndex

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

Пример 1

var pObject = document.all["р"]; pObject.style.fontSize = "24pt";

Этот небольшой сценарий задаст для абзаца с именем р размер шрифта равный 24 пунктам.                                                                       

Пример 2

А вот HTML-код небольшой Web-странички. При наведении мыши на содержащийся в ней текстовый абзац вокруг него появляется рамка.

<HTML> <HEAD>

<TITLE>Текст с рамкой</TITLE> <SCRIPT TYPE="text/javascript"> function pOnMouseOver()

{

var pObject = document.all["p"]; pObject.style.borderLeftColor = "#000000"; pObject.style.borderTopColor = "#000000"; pObject.style.borderRightColor = "#000000"; pObject.style.borderBottomColor = "#000000"; }

function pOnMouseOut() { var pObject = document.all["p"]; pObject.style.borderLeftColor = "#FFFFFF"; pObject.style.borderTopColor = "#FFFFFF"; pObject.style.borderRightColor = "#FFFFFF"; pObject.style.borderBottomColor = "#FFFFFF"; } </SCRIPT> </HEAD> <BODY>

<P ID="p" STYLE="border: thin solid #FFFFFF"ONMOUSEOVER="pOnMouseOver();" ONMOUSEOUT="pOnMouseOut();">Если вы наведете на меня курсор мыши, вокруг меня появится рамка.</Р> </BODY> </HTML>

Видно, что мы присвоили событиям onMouseOver (наведение курсора мыши на элемент страницы) и onMouseOut ("увод" курсора мыши с него) функции-обработчики, которые и выполняют задание новых параметров стиля абзаца.

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

Мы могли бы написать функции-обработчики событий и так:

function pOnMouseOver() {

var pObject = document.all["p"];

pObject.style.border = "thin solid #000000"; }

function pOnMouseOut() { var pObject = document.all["p"]; pObject.style.border = "thin solid #FFFFFF"; }

но такой код не работал бы в Opera. He любит этот Web-обозреватель комплексные атрибуты стилей, наподобие border, и соответствующие им свойства объекта style...

Как временно скрыть элемент страницы? Проблема

Мне нужно временно скрыть элемент Web-страницы, а потом снова вывести его на экран. Как это сделать?

Решение

Объект style поддерживает свойства display и visibility. Они позволяют временно скрыть элемент страницы, но делают это по-разному.

Свойство visibility просто скрывает элемент страницы, делая его невидимым, но при этом не убирает его со страницы. То есть, если мы, скажем, скроем с помощью этого свойства абзац, то он исчезнет со страницы, но вместо него будет отображаться пустое пространство. Нужно иметь это в виду.

Вот все допустимые значения свойства visibility объекта style:

   "hidden" — элемент страницы скрыт; "visible" -— элемент страницы виден;

   "inherit" — элемент страницы виден, если виден его родитель, и наоборот.

Что касается свойства display объекта style, то оно также позволяет скрыть элемент страницы, хотя его назначение несколько иное. Это свойство позволяет задать, как элемент страницы отображается на ней: в виде блочного элемента, в виде встроенного элемента, в виде строки таблицы и пр. Профессиональные Web-дизайнеры говорят, что свойство display задает поведение элемента страницы.

Доступных значений этого свойства очень много:

"none" — элемент вообще не будет отображаться на странице, словно он и не задан в ее HTML-коде (это главное отличие свойства display от свойства visibility);

   "inline" — элемент страницы ведет себя как отдельный символ текста (встроенный элемент);

"block" — элемент страницы ведет себя как абзац текста (блочный элемент);

"list-item" — элемент страницы ведет себя как пункт списка;

   "run-in" — встраивающийся элемент. Если за таким элементом следует блочный элемент, он становится первым символом блочного элемента в противном случае он сам становится блочным элементом;

"compact" — компактный элемент. Если за таким элементом следует блочный элемент, он форматируется как однострочный встроенный элемент и помещается левее блочного элемента. В противном случае он сам форматируется как блочный элемент;

"marker" — маркер списка;

" table" — таблица; "inline-table" — таблица, отформатированная как встроенный элемент; "table-row-group"—секция тела таблицы;

   "table-header-group" — секция "шапки" таблицы;

   "table-footer-group" — секция "поддона" таблицы;

   "table-row" —строка таблицы;

"tabie-column-group"— определение группы столбцов таблицы (формируется с помощью парного тега <colgroup> и служит для задания параметров сразу нескольких столбцов);

   "table-column" — определение столбца таблицы (формируется с помощью парного тега <col> и служит для задания параметров отдельного столбца);

   " table-cell" — ячейка таблицы;

"table-caption" —заголовок таблицы.

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

Internet Explorer поддерживает только значения "none", "inline", "block", "list-item", "table-header-group" и "table-footer-group". Причем поддержка значения "table-footer-group" появилась в версии 5.5, а остальных — в версии 5.

Так вот, свойство display позволяет скрыть элемент страницы полностью, словно он и не был определен в HTML-коде страницы. Для этого достаточно присвоить этому свойству значение "none". Но чтобы вернуть ему видимость, придется вспомнить, чем же был этот элемент страницы до скрытия: встроенным, блочным, таблицей или маркером списка. И присвоить свойству display соответствующее значение.

Народ советует

Если нужно временно скрыть свободно позиционируемый контейнер (о манипуляциях ими будет рассказано в главе 10), то можно использовать как свойство visibility, так и свойство display— оба дают один и тот же эффект. Лучше, конечно, использовать свойство visibility— с ним меньше проблем.


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

RLBN.ru - Электроника и компьютеры
0.1436
Hosted by uCoz