Вычисляемые стили

Свойство style HTML_элемента соответствует HTML_атрибуту style, а объект CSS2Properties, который является значением свойства style, включает в себя ин_ формацию только о встроенных стилях для данного элемента. В нем отсутству_ ют сведения о стилях, находящихся в других местах в каскаде.

Иногда требуется знать точный набор стилей, применяемых к элементу, незави_ симо от того, где в каскаде стилей они определены. То, что вы хотите получить, называется вычисляемым стилем элемента. К сожалению, название вычисляе' мый стиль (computed style) довольно расплывчато – оно означает вычисления,выполняемые до того, как элемент будет отображен веб_броузером: проверяются правила всех таблиц стилей и выясняется, какие из них должны быть примене_ ны к элементу, после чего стили этих правил объединяются со всеми встроенны_ ми стилями элемента. Затем полученная совокупная информация о стиле ис_ пользуется для корректного вывода элемента в окне броузера.

В соответствии со стандартом W3C API для определения вычисляемых стилей элементов должен использоваться метод getComputedStyle() объекта Window. Пер_ вым аргументом методу передается элемент, стиль которого требуется получить. Вторым аргументом передается любой псевдоэлемент, такой как «:before» или «:after», стиль которого желательно получить. Скорее всего, вас не будут инте_ ресовать псевдоэлементы, но дело в том, что в реализации этого метода в Mozilla и Firefox второй аргумент является обязательным и не может быть опущен.

В результате вам часто будут встречаться вызовы getComputedStyle() со значени_ ем null во втором аргументе.

Метод getComputedStyle() возвращает объект CSS2Properties, который представля_ ет все стили, применяемые к заданному элементу или псевдоэлементу. В отли_ чие от объекта CSS2Properties, который хранит информацию о встроенном стиле, объект, возвращаемый getComputedStyle(), доступен только для чтения.

Броузер IE не поддерживает метод getComputedStyle(), но предоставляет простую альтернативу: каждый HTML_элемент имеет свойство currentStyle, в котором хранится вычисляемый стиль. Единственный недостаток прикладного интер_ фейса (API) броузера IE заключается в том, что он не предусматривает возмож_ ности получения стилей псевдоэлементов.

Далее приводится программный код, который не зависит от платформ и опреде_ ляет шрифт, используемый при отображении элемента:

var p = document.getElementsByTagName("p")[0]; // Получить первый абзац

Вычисляемые стили капризны, и при попытке получить их значение требуемая информация возвращается не всегда. Рассмотрим только что продемонстриро_ ванный пример. Для повышения степени переносимости между платформами CSS_атрибут font_family принимает список желательных семейств шрифтов, раз_ деленных запятыми. Когда запрашивается значение атрибута fontFamily вычис_

396 Глава 16. CSS и DHTML

ленного стиля, вы просто получаете значение стиля font_family, который приме_ няется к элементу. В результате можно получить список, такой как «arial, helve_ tica, sans_serif», который ничего не говорит о фактически использованном шриф_ те. Точно так же, если элемент не позиционируется в абсолютных координатах, попытки получить его положение и размеры с помощью свойств top и left вы_ численного стиля дают значение "auto". Это вполне нормальное для CSS значе_ ние, но, скорее всего, совсем не то, что вы пытались узнать.