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

16.4. Вычисленные стили

16.4. Вычисленные стили

Свойство style элемента опредёляет встроенный стиль элемента. Оно имеет преимущество перед всеми таблицами стилей и с успехом может применяться для установки CSS-свойств для изменения визуального представления элемента. Однако в общем случае к нему нет смысла обращаться, когда требуется узнать фактически примененные к элементу стили. То, что требуется в этом случае, называется вычисленным стилем. Вычисленный стиль элемента - это набор значений свойств, которые броузер получил (или вычислил) из встроенного стиля и всех правил из всех таблиц стилей, которые применяются к элементу: это набор свойств, фактически используемый при отображении элемента. Подобно встроенным стилям, вычисленные стили представлены объектом CSSStyleDeclaration. Однако в отличие от встроенных стилей, вычисленные стили доступны только для чтения. Эти стили нельзя изменить, но вычисленный объект CSSStyleDeclaration позволяет точно узнать значения свойств стилей, которые броузер использовал при отображении соответствующего элемента.

Получить вычисленный стиль элемента можно с помощью метода getComputedStyle() объекта Window. Первым аргументом этому методу передается элемент, вычисленный стиль которого требуется вернуть. Второй аргумент является обязательным, и в нем обычно передается значение null или пустая строка, но в нем также может передаваться строка с именем псевдоэлемента CSS, таким как «:before», «:after», «:first-line» или «:first-letter»:

var title = document.getElementById("section1title");
var titlestyles = window.getComputedStyle(element, null);

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

• Свойства вычисленного стиля доступны только для чтения.

• Свойства вычисленных стилей имеют абсолютные значения: относительные единицы измерения, такие как проценты и пункты, преобразуются в абсолютные значения. Любое свойство, которое определяет размер (например, ширина поля или размер шрифта) будет иметь значение, выраженное в пикселах. То есть его значением будет строка с суффиксом «рх», поэтому вам необходимо будет реализовать ее синтаксический анализ, зато не придется беспокоиться об определении и преобразовании единиц измерений. Значения свойств, определяющих цвет, будут возвращаться в формате «rgb(#,#,#)» или «rgba(#,#,#,#)».

• Свойства, являющиеся краткой формой записи, не вычисляются - только фундаментальные свойства, на которых они основаны. Например, не следует пытаться получить значение свойства margin, вместо этого нужно обращаться к свойствам marginLeft, marginTop и т. д.

• Свойство cssText вычисленного стиля не определено.

Вычисленные и встроенные стили можно использовать совместно. В примере 16.4 определяются функции scale() и scaleColor(). Первая читает и анализирует вычисленный размер текста указанного элемента; вторая читает и анализирует вычисленный цвет фона элемента. Затем обе функции умножают полученное значение на заданное число и устанавливают результат, как встроенный стиль элемента. (Эти функции не работают в ІЕ8 и в более ранних версиях: как вы узнаете далее, эти версии ІЕ не поддерживают метод getComputedStyle().)

Пример 16.4 Определение вычисленных стилей и установка встроенных стилей

//Умножает размер текста элемента е на указанное число factor
function scale(e, factor) {
  // Определить текущий размер текста, получив вычисленный стиль
  var size = parseInt(window.getComputedStyle(e, fontSize);
  // И использовать встроенный стиль, чтобы увеличить этот размер
  е.style.fontSize = factor*size + "рх";
}
// Изменяет цвет фона элемента е, умножая компоненты цвета на указанное число.
// Значение factor > 1 осветляет цвет элемента, a factor < 1 затемняет его.
function scaleColor(e, factor) {
  var color = window.getComputedStyle(e, "").backgroundColor; // Получить
  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-family, применяемого к элементу. А в этом случае может вернуться такое значение, как «arial,helvetica,sans-serif», которое ничего не говорит о гарнитуре фактически используемого шрифта. Аналогично, если элемент не является абсолютно позиционируемым, при попытке определить его размеры или положение через свойства top и left вычисленного стиля часто возвращается значение «auto». Это вполне допустимое в CSS значение, но наверняка совсем не то, что вы ожидали бы получить.

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

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

Оглавление книги