Изменение класса стилевых характеристик

В случае если необходимо иметь всего две-три модификации изображения, рекомендуется описать два-три класса стилей и по событию изменять класс.

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

Решение. Опишем два класса: пункт, на который наведена мышка, и все остальные. Сначала всем пунктам списка зададим второй класс (невыделенные), а по событию onmouseover будем изменять класс на первый (текущий). По событию onmouseout будем возвращать класс ко второму.

Класс для html документов описывается атрибутом class. Но в объекте style соответствующее свойство называется className. По-видимому, имя свойства пришлось изменить, так как class – зарезервированное в JAVA слово для описания класса. Это далеко не единственный пример, когда стилевые атрибуты и свойства объекта style называются по-разному. Названия свойств объекта style очень похожи на наименования атрибутов в листах стилей. Но, к сожалению, разработчики листов стилей использовали знак "-" в названиях, а этот символ запрещен в именах переменных практически во всех языках. Поэтому такие названия пришлось изменить. Изменения, к счастью, однотипные: знак "-" опускается, а следующая за ним буква становится заглавной. Так стилевой атрибут list-style-image (маркер в виде картинки) в программе будет выглядеть как listStyleImage.

p {text-align:justify; text-indent:3em; line-height:1.2;

word-spacing:5pt; letter-spacing: 2px; color : rgb (167,32,99)}

li.k1 {list-style-image: url(CatB.gif); list-style-position:

inside; font-size:1.1em}

li.k2 {list-style-image: url(CatW.gif); list-style-position: outside;

margin-left:80; font-size:0.8em}

li {list-style-image: url(CatW.gif)}

……..

<p> Абзацы теперь красиво выровнены. Первая строка с отступом, задано межстрочное расстояние, определен пропуск между буквами и словами. </p>

<ul>

<li class=k1 onclick="if(this.className=='k2'){this.className='k1';} else {this.className='k2'};"> Пункт, в котором картинка - маркер расположена внутри области с текстом. Перенесенный на другую строку текст показывается под картинкой. </LI>

<li class=k2 onclick="if(this.className=='k2'){this.className='k1';} else {this.className='k2'};"> А здесь сначала все по-другому. Перенесенный на вторую строку текст расположен под текстом, а под картинкой пусто. Возможно, Вам придется задать отступ слева, чтобы картинка не "уходила" влево за экран или левый объект.</LI>

</ul>

<ul>

<li style="list-style-image:url(copyr.gif)"

onmouseover= "this.style.listStyleImage='url(circle.gif)'"

onmouseout="this.style.listStyleImage= 'url(copyr.gif)'">

Здесь изменяется маркер при наведении мышкой. </li>

<li style="list-style-image:url(copyr.gif)"

onmouseover="this.style.listStyleImage='url(circle.gif)'"

onmouseout="this.style.listStyleImage= 'url(copyr.gif)'">

И здесь.</li>

<li style="list-style-image:url(copyr.gif)"

onmouseover="this.style.listStyleImage='url(circle.gif)'"

onmouseout="this.style.listStyleImage= 'url(copyr.gif)'">

И здесь.</li>

</ul>

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

Содержимое тэга

Свойство innerHTML содержит все, что вложено в заданный объект, то есть весь текст и тэги. Свойство outerHTML содержит все, что вложено в заданный HTML объект, включая охватывающий тэг. Свойство innerHTML используется в технологии Ajax. С его помощью обновляется часть содержимого страницы.

Если Вы собираетесь изменять стиль объекта или другие его атрибуты, то Вам потребуется изменить свойство outerHTML. Можно совсем избавиться от объекта, задав оператор присваивания объект.outerHTML="". К сожалению, свойство outerHTML не всегда корректно работает.

Свойство innerText содержит весь текст, вложенный в заданный объект и в дочерние объекты без тэгов. Свойство outerText очень похоже на предыдущее. Разница заключается в том, что outerText подменяет весь тэг.

Пример с использованием innerText рассмотрен при изучении конструкции switch.

Видимость

Рассмотрим следующую задачу. В тексте некоторые слова выделены. При щелчке по этим словам ниже текущего абзаца появляется абзац или несколько абзацев, поясняющий смысл данного слова. При повторном щелчке по слову пояснение исчезает. Решить такую задачу можно, используя свойство «видимость».

Свойство стиля visibility позволяет сделать объект видимым или невидимым. Невидимый объект может занимать или не занимать место на экране. К сожалению, в разных версиях браузеров результат может быть разным. В Internet Explorer 6 при изменении видимости с помощью свойства visibility место под объект остается занятым, т.е. остается пустое поле. Если же вы хотите добиться эффекта «раздвигания текста», то используйте свойство display. Это менее удобное свойство, так как для указания невидимости достаточно указать display:none, а для указания видимости (см. HTML-Reference), требуется указать тип объекта, а значит, его надо знать.

<div id=dd1 style="font-size:40; visibility:visible"

onclick="this.style.visibility='hidden'" title="Щелкните – исчезну!">

Из сумерек видением ко сну вдруг выйдет девочка, на вид - четыре года.

</div>

... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......

<div id=dd2 style="font-size:40; display:block"

onclick="this.style.display='none'" title="Щелкните – исчезну совсем!">

И как пловец испытывает воду, девчушка валенками пробует весну...

</div>

... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......

<div onclick="dd1.style.visibility='visible'">Появится первый</div>

<div onclick="dd2.style.display='block'">Появится второй блоком</div>

<div onclick="dd2.style.display='inline'">Появится второй по-другому – потоком </div>