Это еще одно окно. Значение атрибута <i>z-index</i> этого окна заставляет его расположиться поверх другого. За счет CSS-стилей содержимое этого окна будет выглядеть полупрозрачным в броузерах, поддерживающих такую возможность.
</div>
</div>
</body>
Основной недостаток этого примера в том, что таблица стилей задает фиксированный размер всех окон. Так как заголовок и содержимое окна должны точно позиционироваться внутри окна, изменение размера окна требует изменения значений различных свойств позиционирования во всех трех правилах, определенных в таблице стилей. Это трудно сделать в статическом HTML-документе, но все становится проще, если использовать сценарий, устанавливающий все необходимые свойства. Эта возможность рассматривается в следующем разделе.
16.3. Управление встроенными стилями
Самый простой способ управления стилями CSS - это манипулирование атрибутом
style
отдельных элементов документа. Как и для большинства HTML-атрибутов, атрибуту
style
соответствует одноименное свойство объекта
Element
, и им можно манипулировать в сценариях на языке JavaScript. Однако свойство
style
имеет одну отличительную особенность: его значением является не строка, а объект
CSSStyleDeclaration
. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте
style
. Например, чтобы вывести содержимое текстового элемента е крупным, полужирным шрифтом синего цвета, можно выполнить следующие операции для записи желаемых значений в свойства, которые соответствуют свойствам стиля
не забывайте, что все значения должны задаваться в виде строк. В таблице стилей или атрибуте
style
можно написать:
position: absolute;
font-family: sans-serif;
background-color: №ffffff;
Чтобы сделать то же самое для элемента е в JavaScript, необходимо заключить все значения в кавычки:
е.style.position = "absolute";
е.style.fontFamily = "sans-serif";
e.style.backgroundColor = "flffffff";
Обратите внимание, что точки с запятыми не входят в строковые значения. Это точки с запятой, употребляемые в синтаксисе языка JavaScript. Точки с запятой, используемые в таблицах стилей CSS, не нужны в строковых значениях, устанавливаемых с помощью JavaScript.
Кроме того, помните, что во всех свойствах позиционирования должны быть указаны единицы измерения. То есть нельзя устанавливать свойство
left
подобным образом:
е.style.left = 300; // Неправильно: это число, а не строка
е.style.left = "300"; // Неправильно: отсутствуют единицы измерения
Единицы измерения обязательны при установке свойств стиля в JavaScript - так же, как при установке свойств стиля в таблицах стилей. Ниже приводится правильный способ установки значения свойства left элемента е, равным 300 пикселам:
е.style.left = "300px";
Чтобы установить свойство
left
равным вычисляемому значению, обязательно добавьте единицы измерения в конце вычислений: