Метод Window: getComputedStyle()

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

Индивидуальные значения свойств CSS доступны через API, предоставляемые объектом, или по индексу с именами свойств CSS.

element

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

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

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

Динамический CSSStyleDeclaration объект, который автоматически обновляется при изменении стилей элемента.

TypeError

Если переданный объект не является Element, или pseudoElt не является допустимым селектором псевдоэлемента или является ::part() или ::slotted().

Примечание: Допустимый селектор псевдоэлемента относится к синтаксической корректности, например, ::unsupported считается допустимым, даже если сам псевдоэлемент не поддерживается. Кроме того, последний стандарт W3 явным образом поддерживает только ::before и ::after, в то время как проект CSS WG не ограничивает это значение. Совместимость с браузерами может отличаться.

В этом примере мы задаём стили элементу <p>, затем получаем эти стили с помощью getComputedStyle(), и выводим их в текстовое содержимое <p>.

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

• Объект из getComputedStyle является только для чтения и должен использоваться для проверки стилей элемента, включая те, что установлены элементом <style> или внешним стилем.
• Объект element.style должен использоваться для установки стилей этого элемента или для проверки стилей, добавленных непосредственно в него средствами JavaScript или глобальным атрибутом style.

Первый аргумент должен быть Element. Объекты, не являющиеся элементами, например, узел Text, вызовут ошибку.

Во многих примерах кода getComputedStyle используется из объекта document.defaultView. Почти во всех случаях это излишне, так как getComputedStyle также существует в объекте window. Вероятно, шаблон defaultView был результатом сочетания того, что люди не хотели писать спецификацию тестирования для window и создание API, пригодного для использования в Java.

getComputedStyle может извлекать информацию о стиле из псевдоэлементов (таких как ::after, ::before, ::marker, ::line-marker — см. спецификацию псевдоэлементов).

<style>
  h3::after {
    content: " rocks!";
  }
</style>

<h3>Generated content</h3>

<script>
  const h3 = document.querySelector("h3");
  const result = getComputedStyle(h3, ":after").content;

  console.log("the generated content is: ", result); // returns ' rocks!'
</script>

• Возвращаемый CSSStyleDeclaration объект содержит активные значения для имен свойств CSS в полной форме, а также для сокращённых имен. Например, возвращаемый объект содержит записи для border-bottom-width в дополнение к border-width и border сокращённым именам свойств. Вы можете запросить значения с полными именами, например, font-size, а также с сокращёнными именами, например, font.
• Значения свойств CSS могут быть получены с помощью метода getPropertyValue(propName) или по индексу в объекте, используя обозначение массива или точку, например, obj['z-index'] или obj.zIndex.
• Значения, возвращаемые getComputedStyle , являются разрешёнными значениями. Они обычно совпадают со значениями вычисленных свойств CSS 2.1, но для некоторых старых свойств, таких как width, height, или padding, они соответствуют значениям, используемым в вычислениях. В CSS 2.0 значения вычисленных свойств определялись как готовые к использованию окончательные значения свойств после каскадирования и наследования, но в CSS 2.1 они были переопределены как значения до макета, а значения используемых свойств — как значения после макета. Для свойств CSS 2.0 getComputedStyle возвращает старое значение вычисленных свойств, теперь называемые используемыми значениями. Пример различия между значениями до и после макета включает разрешение процентов для width или height, так как они будут заменены их пиксельными эквивалентами только для используемых значений.
• Возвращаемые значения иногда намеренно неточные. Чтобы избежать проблемы безопасности «CSS History Leak», браузеры могут лгать о вычисленных стилях для посещённых ссылок, возвращая значения, как будто пользователь никогда не посещал связанный URL. См. Подключение утечки истории CSS и Изменения, связанные с конфиденциальностью, которые появятся в CSS :visited для примеров реализации этого.
• Во время CSS-переходов getComputedStyle возвращает исходное значение свойства в Firefox, но конечное значение свойства в WebKit.
• В Firefox свойства со значением auto возвращают используемое значение, а не значение auto. Таким образом, если вы применяете top:auto и bottom:0 к элементу с height:30px и содержащим блоком height:100px, вычисленный стиль Firefox для top вернёт 70px, так как 100 − 30 = 70.
• По соображениям совместимости сериализованные значения цветов выражаются как rgb() цвета, если значение альфа-канала равно точно 1, и rgba() цвета в противном случае. В обоих случаях используется устаревшая синтаксис, с запятыми в качестве разделителей (например, rgb(255, 0, 0)).

• window.getDefaultComputedStyle()
• getPropertyValue()
• Разрешенное значение