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

Флэнаган Дэвид

var components = color.match(/[\d\.]+/g); // Выбрать компоненты r.g.b и a

for(var і = 0; і < 3; i++) { // Цикл по r, g и b

var х = Number(components[i]) * factor;// Умножить каждый из них

х = Math.round(Math.min(Math.max(x, 0). 255)); // Округлить и установить границы

components[i] = String(x);

}

if (components.length == 3) // Цвет rgb

e.style.backgroundColor = "rgb(" + components.join + ")";

else //

Цвет rgba

e. style. backgroundColor = ''rgba(" + components. join + ')":

}

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

font-family

: оно принимает список разделенных запятыми имен семейств шрифтов для совместимости. При чтении свойства

fontFamily

вычисленного стиля вы ждете значение наиболее конкретного стиля

font-fami

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

top

и

left

вычисленного стиля часто возвращается значение «auto». Это вполне допустимое в CSS значение, но наверняка совсем не то, что вы ожидали бы получить.

Метод

getComputedStyle

не поддерживается в IE8 и в более ранних версиях, но, как ожидается, он будет реализован в IE9. В IE все HTML-элементы имеют свойство

currentStyle

, значением которого является объект

CSSStyleDeclaration

. Свойство

currentStyle

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

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

16.5. CSS-классы

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

style

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

.attention { /* Стили для элементов, требующих внимания пользователя */

background-color: yellow; /* Желтый фон */

font-weight: bold; /* Полужирный шрифт */

border: solid black 2рх; /* Черная рамка */

}

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

class

в языке JavaScript является зарезервированным словом, поэтому HTML-атрибут

class

в JavaScript-сценариях доступен в виде свойства с именем

className

. Ниже приводится пример, который

устанавливает и очищает свойство

className

элемента, добавляя и убирая класс «attention»:

function grabAttention(e) { е.className = "attention"; }

function releaseAttention(e) { e.className = ""; }

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

class

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

className

не совсем точно отражает смысл свойства: правильнее было бы дать ему имя

classNames

. Функции выше предполагают, что свойство

className

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

grabAttention

для этого элемента затрет имя класса, присутствующее в свойстве

className

.

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

classList

во всех элементах. Значением этого свойства является объект

DOMTokenList

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

add

и

remove,

добавляющие и удаляющие отдельные имена классов из атрибута class элемента. Метод

toggle

добавляет имя класса, если оно отсутствует, и удаляет в противном случае. Наконец, метод

contains

проверяет присутствие указанного имени класса в атрибуте class.

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

DOMTokenList

является «живым» представлением множества классов в элементе, а не статическим слепком, который был действителен только в момент обращения к свойству

classList

. Если сценарий получит объект

DOMTokenList

, обратившись к свойству

classList

элемента, и затем изменит свойство

className

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

DOMTokenList

. Аналогично любые изменения, выполненные в объекте

DOMTokenList

, немедленно отразятся на значении свойства

className

.

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

classList

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

class

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

Пример 16.5.

classList

: интерпретирует

className

, как множество CSS-классов

//

* Возвращает свойство classList элемента е. если оно содержит один класс.

* Иначе возвращает объект, имитирующий интерфейс DOMTokenList.

* Возвращаемый объект имеет методы contains, add, remove, toggle и toString,

* позволяющие проверять и изменять набор классов элемента е. Если свойство classList