Окно getComputedStyle()
Пример
Получите вычисленный цвет фона элемента:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
Ниже приведены дополнительные примеры.
Определение и использование
Метод getComputedStyle()получает вычисленные свойства CSS и значения элемента HTML.
Метод getComputedStyle()возвращает
CSSStyleDeclaration object.
Вычисляемый стиль
Вычисляемый стиль — это стиль, используемый для элемента после применения всех источников стилей.
Источники стилей: внешние и внутренние таблицы стилей, унаследованные стили и стили браузера по умолчанию.
Смотрите также:
Синтаксис
window.getComputedStyle(element, pseudoElement)
Параметры
| Parameter | Description |
| element | Required. The element to get the computed style for. |
| pseudoElement | Optional. A pseudo-element to get. |
Возвращаемое значение
| Тип | Описание |
| Объект | Объект CSSStyleDeclaration со всеми свойствами и значениями CSS элемента. |
Дополнительные примеры
Получить все вычисленные стили из элемента:
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>";
}
Получить вычисленный размер шрифта первой буквы в элементе (используя псевдоэлемент):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
Поддержка браузера
getComputedStyle()поддерживается во всех браузерах:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |