Основы DHTML

Стили можно устанавливать не только таким образом. Очень удобно использовать для установления стилей объектов классы. Под классом здесь подразумевается набор неких свойств и их значений, объединенный в один класс. Классу присваивается имя, а затем весь этот набор свойств можно установить для какого-либо конкретного объекта. Это очень удобно, если, например, у вас имеется несколько ссылок и для каждой из них надо установить красный цвет текста и нежно-голубой цвет фона, а также жирный шрифт, то не надо мучать себя и набивать каждый раз эти установки в свойстве Style каждого объекта, сделайте следующим образом:


<Html>

<Head>

<Style>

.Mystyle {Color: Red; Background-Color: Lightblue; Font-Weight: Bold}

</Style>

</Head>

<Body>

<!-- ... Какой-то код ... -->

<A Href="Gotonowhere.Html" Class=Mystyle>

Ссылка с применением класса</A>

<!-- ... Еще какой-то код ... -->

</Body>

</Html>

Как видите, здесь приведен пример использования класса, он же набор свойств. Класс определяется в блоке <HEAD> с помощью блока <STYLE> Таких классов может быть определено великое множество и у них могут быть любые дозволительные имена.

Изменения стиля через Script-язык.

Это еще не все способы изменения стиля. В самом начале этой главы, мы учились динамически изменять стили. Давайте рассмотрим еще один способ изменения, теперь, через объект <SCRIPT>.

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

<HTML>

 <HEAD></HEAD>

 <BODY>

 <SCRIPT LANGUAGE="JScript">

   function changeStyle(object) {

       if (object.style.color=='black')

             object.style.
color='orange';

       else

             object.style.
color='black';

   }

 </SCRIPT>

 <LI>Элемент 1

 <LI style="cursor: hand"; 
onclick="changeStyle(this);">Элемент 2

 </BODY>

 </HTML>

Использование Script-языков дает очень гибкие возможности применения динамических стилей. В этом примере при щелчке мышью на второй элемент списка, он изменяет свой стиль с помощью функции changeStyle, которой в качестве аргумента передается объект, над которым было произведено действие. Комбинирование использования функций и классов, а также различных событий c вашей фантазией дает поистине потрясающие результаты.

Динамика в самом IE 4.0.

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

 <HTML>

 <HEAD>

 </HEAD>

 <BODY>

 <SCRIPT LANGUAGE="JScript">

      function changeDisplay(object) {

            if (object.style.
display=='none')

                  
object.style.display='';

            else

                  
object.style.display='none';

      }

 </SCRIPT>

 <P> Если вы наведете курсор </P>

 <P onclick="changeDisplay(document.all.disappearingString);" 
style="cursor: hand; color: blue">

 на эту строку и 'кликните' ее, </P>

 <P id=disappearingString>то эта строка исчезнет</P>

 <P> А эта займет ее место<p>

 </BODY>

 </HTML>

Здесь комментарии излишни. Наблюдайте, как реагирует IE на изменение стилей содержимого окна.

Если вы наведете курсор

на эту строку и 'кликните' ее,

то эта строка исчезнет

А эта займет ее место