Поделиться через

Введение в динамические стили

Стиль любого элемента HTML в документе можно изменять динамически. Можно изменять цвет, шрифт, межзнаковый интервал, отступ, расположение и видимость текста. Поскольку модель DOM динамического HTML (DHTML) позволяет получить доступ к любому элементу HTML и его атрибутам, для динамического чтения и изменения стилей можно использовать сценарии. В следующем разделе приведено описание динамических стилей и даны инструкции по использованию объектной модели для проверки и изменения стилей.

  • Создание динамических стилей 
  • Простота использования динамических стилей 
  • Динамические документы 
  • Расширенные атрибуты 
  • Особые замечания 
  • Связанные разделы

Создание динамических стилей

С появлением каскадных таблиц стилей (CSS) в веб-браузере Microsoft Internet Explorer 3.0 веб-разработчики получили непревзойденный контроль за отображением документов. Каскадные таблицы стилей позволяют разработчикам и пользователям применять к веб-страницам стиль, который задает представление контента путем изменения атрибутов соответствующих элементов HTML.

Веб-браузер Internet Explorer 4.0 открывает новые возможности технологии каскадных таблиц стилей, позволяя в любой момент времени динамически изменять любой атрибут элемента HTML. С помощью языка сценариев Microsoft JScript или Microsoft VBScript можно изменять атрибуты любого элемента HTML в документе или при возникновении события пользователя. В этом случае страница автоматически обновляется без перезагрузки с сервера. Например, это означает, что для изменения встроенного стиля каскадных таблиц стилей элемента или любого другого атрибута HTML можно изменить элемент style (например, атрибут SRC элемента img).

Веб-браузер Internet Explorer версии 5 и более поздних версий поддерживает объявление элементов, свойств и формул в качестве атрибутов каскадных таблиц стилей и значений свойств DHTML. Для задания формул динамических свойств используется метод setExpression, а для явного обновления формул — метод recalc. Кроме того, при изменении значения свойства expando или свойств стиля подчиненного объекта элементы вызывают событие onpropertychange. Например, значение атрибута width элемента ячейки table может быть формулой, которая настраивается автоматически исходя из размеров смежных объектов. Если для получения значений свойств и стиля используются формулы, для отслеживания и реагирования на изменения во всем документе можно использовать событие onpropertychange и новый объект currentStyle.

Простота использования динамических стилей

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

<H1 onmouseover="this.style.color = 'red';">Изменить цвет на красный</H1>

Обработчик события onmouseover="this.style.color= 'red';" принимает предопределенное действие (событие onmouseover) и назначает для него действие, выполняемое при вызове (this.style.color= 'red'). Этот способ можно использовать не только для изменения стиля, но и для изменения контента атрибута SRC.

<IMG src="before.gif" onmouseover="this.src = 'after.gif';">

В этом примере при наведении указателя мыши на изображение источник изменяется с "before.gif" на "after.gif".

В веб-браузере Internet Explorer версии 5 и более поздних версий для обработки сценариев с изменением стилей и свойств разработчики могут использовать событие onpropertychange. В предыдущем примере при наведении указателя мыши на изображение изменяется значение свойства SRC. Если для получения сведений о внешнем виде или расположении остальные элементы используют значение свойства SRC, событие onpropertychange является удобным средством определения любых дополнительных действий.

Дополнительные сведения об использовании обработчиков событий см. в разделе Общие сведения о модели события.

Динамические документы

При динамическом изменении цвета элемента размер физического пространства, занимаемого элементом в документе, не изменяется. Эта задача является относительно простой для веб-браузера. Однако существуют стили, например fontSize или fontFamily, при изменении которых размер элемента и размер пространства, требуемого для отображения этого элемента в документе, также изменяется. Для обеспечения надлежащего отображения без повторной загрузки документа с сервера веб-браузер Internet Explorer 4.0 и более поздних версий обрабатывает подобные изменения автоматически.

<html>

<body>

Это текст.

<span onclick="this.style.color = 'BLUE'; this.style.fontSize = '30'">

Увеличить размер шрифта.</span>

Увеличить размер шрифта.

</body>

</html>

Пример кода. http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/style_01.htm

Изначально документ содержит три предложения с одинаковым цветом и размером шрифта. Если пользователь щелкает "Увеличить размер шрифта", размер шрифта увеличивается, а цвет шрифта изменяется на синий. Веб-браузер автоматически задает значение междустрочного интервала в соответствии с новым размером текста.

Расширенные атрибуты

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

<html>

<body>

<div style="cursor: hand" onclick="toggle(HideShow);">

Щелкните здесь</div>

<span style="color: blue" id=HideShow>Эта строка будет скрыта</span><br>

Текст

<script>

function toggle(e) {

  if (e.style.display == "none") {

     e.style.display = "";

  } else {

     e.style.display = "none";

  }

}

</script>

</body>

</html>

Пример кода. http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/style_02.htm

Этот код HTML отображает на странице три строки. Когда пользователь щелкает строку "Щелкните здесь", веб-браузер изменяет значение атрибута display элемента span с текстом "Эта строка будет скрыта" на display:none, а строка, расположенная ниже, сдвигается вверх, чтобы занять освободившееся пространство. Если пользователь щелкает еще раз, значение атрибута display сбрасывается, поэтому текст "Щелкните здесь" снова становится видимым.

Обратите внимание, что при установке значения display:none элемент становится невидимым и веб-браузер автоматически использует пространство, занимаемое элементом. Этот механизм можно использовать для создания страниц, на которых отображаются новые сведения, например оглавление, раскрывающееся при выборе пользователем отдельных записей. Свойство display поддерживает два значения: none и "" (или NULL).

В примере, приведенном выше, также используется атрибут cursor каскадных таблиц стилей. Атрибут cursor предназначен для задания внешнего вида курсора при наведении на элемент. В этом примере для указания, что действие выполняется при щелчке правой кнопкой мыши текста "Щелкните здесь", был выбран курсор "рука", как при использовании текстовой ссылки на веб-странице. Если используется атрибут cursor, для изменения курсора не требуется использовать тег привязки.

Допустимые значения атрибута cursor: crosshair, default, hand, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait и help.

Свойство display позволяет скрыть элемент и восстановить пространство, которое он занимал, а свойство visibility позволяет скрыть элемент и сохранить пространство, занимаемое им.

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

<html>

<body>

<div style="cursor: hand" onclick="toggle(HideShow);">

Щелкните здесь</div>

<span style="color: blue" id=HideShow>Текст будет скрыт</span><br>

This is some text

<script>

function toggle(e) {

  if (e.style.visibility == "hidden") {

     e.style.visibility = "visible";

  } else {

     e.style.visibility = "hidden";

  }

}

</script>

</body>

</html>

Пример кода. http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/style_03.htm

Обратите внимание, что в этом примере строка текста становится невидимой, однако контент под строкой не сдвигается с учетом освободившегося пространства.

Особые замечания

Возможно, вы заметили, что имена большинства свойств CSSсодержат тире (например, background-color). В большинстве языков сценариев тире является недопустимым символом. Чтобы устранить эту проблему, при указании атрибута CSS в коде HTML или таблице стилей используйте имена с тире, однако при доступе к атрибуту в качестве свойства сценария удалите тире, а в качестве следующей буквы используйте прописную. Пример:

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

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

<html>

<head>

<style>

.class1 {font-family: arial}

</style>

</head>

<body>

<INPUT TYPE=button value="Check CSS" onclick="fnCheckCSS()">

<div id=SetByClass class=Class1>Задается классом</div>

<div style="font-family: arial">

      <div id=Inherited>Наследуемый</div>

</div>

<div id=DirectlySet style="font-family: arial">Задается напрямую</div>

<div id=SetWithScript>Задается с помощью сценария</div>

<script>

function fnCheckCSS(){

      alert(SetByClass.style.fontFamily);

      alert(Inherited.style.fontFamily);

      alert(DirectlySet.style.fontFamily);

      SetWithScript.style.fontFamily = "arial";

      alert(SetWithScript.style.fontFamily);

}

</script>

</body>

</html>

Пример кода. http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/style_04.htm

При загрузке этого документа появляются четыре диалоговых окна с предупреждениями. Первые два диалоговых окна пустые, а в остальных содержится текст "arial". Свойство fontFamily возвращает значение "arial" только для элемента div, свойство которого задано во встроенной таблице стилей или в сценарии. В веб-браузере Internet Explorer версии 5 и более поздних версий для извлечения значения свойства fontFamily, которое задано в объекте style или наследуется, вместо объекта style веб-разработчики могут использовать объект currentStyle.

Связанные разделы