• Статья
Изменение стилей элементов

Динамический HTML (язык DHTML) позволяет создать скрипт, который может изменять атрибуты HTML, изменяющие заданный элемент. Эти атрибуты могут быть объектами, такими как атрибут SRC элемента img или iframe либо атрибут style элемента div. В данном документе показано, как изменить атрибут SRC элемента iframe, чтобы содержимое iframe изменялось оперативно. В этом примере также показано, как изменить цвет фона основного текста для документа SRC= в iframe. В следующем наборе примеров показано, как изменить имя класса для элементы, чтобы он был сопоставлен с другой таблицей стилей.

Язык DHTML предоставляет основанный на скриптах доступ ко всем элементам HTML, атрибутам и стилям каскадных таблиц стилей (CSS). Являясь разработчиком, вы можете использовать эти методы для разработки довольно эффективных веб-страниц DHTML.

  • Изменение стиля IFRAME 
  • Изменение классов элементов 
  • Создание сценариев для атрибутов CSS 

Изменение стиля IFRAME

В следующем примере показано, как изменить содержимое iframe, а также как изменить атрибут стиля элемента BODY содержащего объект элемента iframe. Нажмите кнопку "Показать" для отображения страницы и взгляните на код.

<HTML>
<HEAD><TITLE>Изменение атрибутов элементов</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function change_image() {
document.all.myiframe.src="frame_content2.htm";
//использование коллекции all для доступа к атрибутам элемента IFRAME
}
function change_background() {
document.frames.myiframe.document.body.style.backgroundColor="green";
// использование коллекции frames для доступа к документу, содержащемуся в элементе IFRAME
}
</SCRIPT>
</HEAD>
<BODY>
<IFRAME id=myiframe src="frame_content.htm">
</IFRAME>
<BUTTON onclick=change_image()>Изменение содержимого IFRAME</BUTTON>
<BUTTON onclick=change_background()>Изменение цвета фона IFRAME</BUTTON>
</BODY>
</HTML>

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

Изменение классов элементов

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

<H1 id=myStyle onclick="this.style.color=blue">Данный текст выделяется голубым цветом, если его щелкнуть </H1>

Это изменяет свойство "color" подчиненного объекта стиля для элемента H1.

Однако, чтобы изменить стиль для нескольких элементов, используйте таблицы глобальных стилей, которые позволяют задавать стили на базе "контекстного селектора." Стили могут применяться к именам тегов, к идентификаторам элементов или ко всем элементам в классе. Атрибут класса DHTML для каждого элемента позволяет сопоставить любой элемент с любым именем класса. Таким образом, несколько элементов могут принадлежать к одному классу, а задание глобального стиля для класса означает, что таблица стилей применяется к каждому элементу с этим именем класса.

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

<HTML>
<HEAD><TITLE>Изменение атрибутов элементов</TITLE>
<STYLE>
.textRed {color:red}
.textBlue {color:blue}
</STYLE>
</HEAD>
<BODY>
<H1 class=textBlue onmouseover="this.className='textRed'"
onmouseout="this.className='textBlue'">
Наведите указатель мыши на этот текст, чтобы увидеть изменение цвета с голубого на красный, а затем обратно на голубой
</H1>
</BODY>
</HTML>

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

В данном примере глобальные правила определяются для двух классов — textRed и textBlue. Изначально H1 является частью класса textBlue и выделяется голубым цветом. При перемещении указателя мыши на текст запускается событие onmouseover, а встроенный обработчик событий изменяет сопоставление элемента H1 на класс textRed, в результате чего текст выделяется красным цветом. Обратите внимание на то, что ссылка на атрибут класса осуществляется через свойство className.

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

Создание сценариев для атрибутов CSS

Все атрибуты стилей являются строковыми значениями. Чтобы облегчить работу с величинами, отличными от строковых значений, в объект стиля было добавлено несколько свойств. Например, pixelHeight является целым числом, поэтому с высотой объекта можно выполнять математические операции на базе точек независимо от значения атрибута height. Свойство posHeight является целым числом и описывает атрибут height в тех единицах измерения, которые разработчик изначально задал для атрибута CSS height.

Если свойство стиля представляет собой некоторое число единиц измерения, при назначении значения можно включить обозначение единиц изменения. В следующих примерах используются обозначения pt (points) и px (pixels).

document.all.MyElement.style.fontSize = "24pt";

document.all.MyElement.style.fontSize = "120px";

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

document.all.MyElement.style.fontSize = "72";

document.all.MyElement.style.fontSize = 72;