Метод getComputedStyle() Window

Определение и использование

getComputedStyle() Метод��取 вычисленные CSS-свойства и значения HTML-элемента.

getComputedStyle() Метод возвращает объект CSSStyleDeclaration.

Вычисленный стиль

Вычисленный стиль означает стили, используемые на элементе после применения всех источников стилей.

Источник стиля: внешние и внутренние таблицы стилей, стили, наследуемые, и стили по умолчанию браузера.

См. также:

Объект CSSStyleDeclaration

Пример

Пример 1

Получите вычисленный цвет фона элемента:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

Попробуйте сами

Пример 2

Получите все вычисленные стили из элемента:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
  cssObjProp = cssObj.item(x);
  text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}

Попробуйте сами

Пример 3

Получите вычисленный размер шрифта первой буквы элемента (используя псевдоэлемент):

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter");
let size = cssObj.getPropertyValue("font-size");

Попробуйте сами

Синтаксис

window.getComputedStyle(element, pseudoElement)

Параметры

Параметры Описание
element Обязателен. Элемент, для которого нужно получить вычисленный стиль.
pseudoElement Опционально. Псевдоэлемент, для которого нужно получить вычисленный стиль.

Возврат

Тип Описание
Объект Объект CSSStyleDeclaration, содержащий все CSS-свойства и значения элемента.

Разница между методом getComputedStyle() и свойством style

Сравните метод getComputedStyle() с свойством style HTMLElement: последнее позволяет доступ к инлайн стилям элемента, с любыми единицами измерения, которые вы指定ите, и не может предоставить вам никакой информации о примененных стилях таблицы стилей к элементу.

Поддержка браузерами

Все браузеры поддерживают getComputedStyle():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка