JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:

<div class="window" style="left: 10px; top: 10px; z-index: 10;">

<div class="titlebar">Tecтовoe окно</div>

<div class="content">

1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><!-- Множество строк для -->

1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><!-- демонстр, прокрутки -->

</div>

</div>

<!-- Это еще одно окно с другими позицией, цветом и шрифтом -->

<div class="window" style="left: 75px; top: 110px; z-index: 20;">

<div class="titlebar">Еще одно окно</div>

<div class="tra content"

style="background-color:#ccc; font-weight:bold;">

Это еще одно окно. Значение атрибута <i>z-index</i> этого окна заставляет его расположиться поверх другого. За счет CSS-стилей содержимое этого окна будет выглядеть полупрозрачным в броузерах, поддерживающих такую возможность.

</div>

</div>

</body>

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

16.3. Управление встроенными стилями

Самый простой способ управления стилями CSS - это манипулирование атрибутом

style
отдельных элементов документа. Как и для большинства HTML-атрибутов, атрибуту
style
соответствует одноименное свойство объекта
Element
, и им можно манипулировать в сценариях на языке JavaScript. Однако свойство
style
имеет одну отличительную особенность: его значением является не строка, а объект
CSSStyleDeclaration
. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте
style
. Например, чтобы вывести содержимое текстового элемента е крупным, полужирным шрифтом синего цвета, можно выполнить следующие операции для записи желаемых значений в свойства, которые соответствуют свойствам стиля
font-size, font-weight
и
color
:

е.style.fontSize = "24pt"; e.style.fontWeight = "bold"; e.style.color = "blue";

При работе со свойствами стиля объекта

CSSStyleDeclaration
не забывайте, что все значения должны задаваться в виде строк. В таблице стилей или атрибуте
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 пикселам: