JavaScript и CSS

12. Управление CSS-свойствами на JavaScript

JavaScript и CSS

Вероятно, вы уже обратили внимание на свойство style объектов, построенных в DOM для HTML-элементов. Это свойство было задействовано, например, в последнем примере 5 заметки 11.

Поговорим об этом важном свойстве подробнее.

Пусть некоторый HTML-элемент имеет идентификатор id="identifier". Получить доступ к объекту, построенного в DOM для этого элемента можно следующим образом:


var element = document.getElementById("identifier");

Получить доступ к объектам, построенным для якорей, апплетов, форм, картинок и ссылок можно и при помощи соответствующих коллекций: anchors, applets, forms, images и links. Кроме того, для элементов FORM, IMG и APPLET, возможен именованный доступ вида: document.name, где name — значение соответствующего атрибута этих элементов.

Свойство element.style ссылается на объект, содержащий все CSS-свойства HTML-элемента. При этом работает следующее соглашение об именах этих свойств в JavaScript:

Если CSS-свойcтво не содержит дефисов, оно полностью совпадает с JavaScript-аналогом (записанным в нижнем регистре).
Примеры:
```
element.style.color
element.style.background
element.style.font
element.style.border
element.style.margin
element.style.padding
```
Если CSS-свойcтво содержит дефисы, то имя JavaScript-свойство образуется путем удаления дефисов и перевода в верхний регистр буквы, непосредственно следующей за каждым из них.
Примеры:
```
element.style.fontFamily
element.style.fontSize
element.style.backgroundPosition
element.style.listStyleImage
element.style.listStyleType
element.style.borderTopColor
element.style.paddingBottom
```

Имеется одно исключение. Свойство flоat преобразуется в cssFloat (так как float зарезервировано в JavaScript как ключевое слово).

Отметим, что CSS-свойства объекта учитывают только те стилевые свойства, которые заданы в самом элементе при помощи атрибута style, и не учитывают стилевых свойств, заданных иным способом (в отдельном CSS-файле или элементе STYLE). Пусть, например, в HTML-коде написано:


<H1 id="h1">Заголовок</H1>

а в CSS-файле задано определение:


#h1{color:red;}

Если прочитать соответствующее свойство объекта:


var element = document.getElementById("h1");  
alert(element.style.color); // Пустая строка

получим пустую строку.

И только если цвет задан в самом элементе:


<H1 id="h1" style="color:red">Заголовок</H1>

получим то, что ожидалось:


var element = document.getElementById("h1");  
alert(element.style.color); // "red"

Такое поведение логично. Ведь в объекте, построенном для элемента, учитываются только заданные в нём самом атрибуты.

Пример 1. Прозрачная панель

Пример демонстрирует работу со свойствами CSS на JavaScript. Текст страницы («рыба») получен Lorem Ipsum генератором на странице www.lorem-ipsum.info/generator3.

Смотрите: Пример 1. Прозрачная панель