window.getComputedStyle()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Метод Window.getComputedStyle() возвращает объект, содержащий значения всех CSS-свойств элемента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать. Некоторые CSS-свойства доступны через API, предоставляемые объектом, или индексацию по именам CSS-свойств.

Синтаксис

var style = window.getComputedStyle(element [, pseudoElt]);
element

Element, свойства которого необходимо получить.

pseudoElt Необязательный

Строка указывающая на найденный псевдо-элемент. Опускается (или null) для не псевдо-элементов.

Возвращённый style живой CSSStyleDeclaration объект, который обновляется автоматически когда элемент стилей изменяется.

Выводы

Метод Window.getComputedStyle() предоставляет все значения CSS-свойств элементов после применения текущей таблицы стилей или базового расчёта каких-либо значений, которые могут быть.

Пример

js
var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);

// this is equivalent:
// var style = document.defaultView.getComputedStyle(elem1, null);
js



dummy
js
function dumpComputedStyles(elem, prop) {
  var cs = window.getComputedStyle(elem, null);
  if (prop) {
    console.log(prop + " : " + cs.getPropertyValue(prop));
    return;
  }
  var len = cs.length;
  for (var i = 0; i < len; i++) {
    var style = cs[i];
    console.log(style + " : " + cs.getPropertyValue(style));
  }
}

Описание

Возвращённый объект - это такой же объект, который возвращается из свойства элемента style; Так или иначе, эти два объекта имеют разные назначения. Объект который возвращается из getComputedStyle только для чтения и может быть использован для инспектирования стиля элемента (включая описание из

generated content