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

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

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

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

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

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

не забывайте, что все значения должны задаваться в виде строк. В таблице стилей или атрибуте можно написать:

Чтобы сделать то же самое для элемента е в JavaScript, необходимо заключить все значения в кавычки:

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

Кроме того, помните, что во всех свойствах позиционирования должны быть указаны единицы измерения. То есть нельзя устанавливать свойство

подобным образом:

Единицы измерения обязательны при установке свойств стиля в JavaScript - так же, как при установке свойств стиля в таблицах стилей. Ниже приводится правильный способ установки значения свойства left элемента е, равным 300 пикселам:

Чтобы установить свойство

равным вычисляемому значению, обязательно добавьте единицы измерения в конце вычислений:

Как побочный эффект, добавление строки с единицами измерения преобразует вычисленное значение из числа в строку.

Многие CSS-свойства стиля, такие как

, содержат в своих именах дефис. В языке JavaScript дефис интерпретируется как знак минус, поэтому нельзя записать выражение, приведенное ниже:

Таким образом, имена свойств объекта

слегка отличаются от имен реальных CSS-свойств. Если имя CSS-свойства содержит дефисы, имя свойства объекта образуется путем удаления дефисов и перевода в верхний регистр буквы, непосредственно следующей за каждым из них. Другими словами, CSS-свойство доступно через свойство , а к CSS-свойству можно обратиться следующим образом:

Кроме того, когда CSS-свойство, такое как

, имеет имя, совпадающее с зарезервированным словом языка JavaScript, к этому имени добавляется префикс «css», чтобы создать допустимое имя свойства объекта . То есть, чтобы прочитать или изменить значение CSS-свойства элемента, следует использовать свойство объекта .