Чтение онлайн

Работа с вычисленными стилями может оказаться весьма непростым делом, и обращение к ним не всегда возвращает ожидаемую информацию. Рассмотрим в качестве примера свойство

: оно принимает список разделенных запятыми имен семейств шрифтов для совместимости. При чтении свойства вычисленного стиля вы ждете значение наиболее конкретного стиля ly, применяемого к элементу. А в этом случае может вернуться такое значение, как «arial,helvetica,sans-serif», которое ничего не говорит о гарнитуре фактически используемого шрифта. Аналогично, если элемент не является абсолютно позиционируемым, при попытке определить его размеры или положение через свойства и вычисленного стиля часто возвращается значение «auto». Это вполне допустимое в CSS значение, но наверняка совсем не то, что вы ожидали бы получить.

Метод

не поддерживается в IE8 и в более ранних версиях, но, как ожидается, он будет реализован в IE9. В IE все HTML-элементы имеют свойство , значением которого является объект . Свойство в IE объединяет встроенные стили с таблицами стилей, но оно не является по-настоящему вычисленным стилем, потому что не преобразует относительные значения в абсолютные. При чтении свойств текущего стиля в IE могут возвращаться размеры в относительных единицах измерения, таких как «%» или «еm», а цвета в виде неточных названий, таких как «red».

Стили CSS можно использовать, чтобы точно задать позицию и размер элемента документа, но чтение вычисленного стиля элемента является не самым лучшим способом узнать его размер и положение в документе. Более простые, переносимые решения приводятся в разделе 15.8.2.

Альтернативой использованию отдельных CSS-стилей через свойство

является управление значением HTML-атрибута class. Изменение класса элемента изменяет набор селекторов стилей, применяемых к элементу, что может приводить к изменениям значений сразу нескольких CSS-свойств. Предположим, например, что вам требуется привлечь внимание пользователя к отдельным абзацам (или другим элементам) в документе. В этом случае можно было бы сначала определить особый стиль оформления для любых элементов с классом «attention»:

Идентификатор

в языке JavaScript является зарезервированным словом, поэтому HTML-атрибут в JavaScript-сценариях доступен в виде свойства с именем . Ниже приводится пример, который устанавливает и очищает свойство элемента, добавляя и убирая класс «attention»:

HTML-элементы могут быть членами более чем одного CSS-класса - атрибут

может содержать целый список имен классов, разделенных пробелами. Имя не совсем точно отражает смысл свойства: правильнее было бы дать ему имя . Функции выше предполагают, что свойство будет определять ноль или одно имя класса, и они непригодны в случаях, когда может использоваться более одного имени класса. Если элемент уже принадлежит некоторому классу, вызов функции для этого элемента затрет имя класса, присутствующее в свойстве .

Стандарт HTML5 решает эту проблему, определяя свойство

во всех элементах. Значением этого свойства является объект : подобный массиву объект (раздел 7.11), доступный только для чтения, элементы которого содержат отдельные имена классов, присвоенных элементу. Однако самыми важными в нем являются не элементы массива, а методы и добавляющие и удаляющие отдельные имена классов из атрибута class элемента. Метод добавляет имя класса, если оно отсутствует, и удаляет в противном случае. Наконец, метод проверяет присутствие указанного имени класса в атрибуте class.

Подобно другим классам коллекций в модели DOM, объект

является «живым» представлением множества классов в элементе, а не статическим слепком, который был действителен только в момент обращения к свойству . Если сценарий получит объект , обратившись к свойству элемента, и затем изменит свойство этого элемента, то выполненные изменения немедленно отразятся на полученном объекте . Аналогично любые изменения, выполненные в объекте , немедленно отразятся на значении свойства .

На момент написания этих строк свойство

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

Пример 16.5.

: интерпретирует , как множество CSS-классов