Метод getComputedStyle()
Пример
Получить вычисленный цвет фона элемента:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
Попробуйте сами »
Смотрите примеры ниже.
Описание getComputedStyle()
Метод getComputedStyle() получает вычисленные свойства CSS и значения элемента HTML.
Метод getComputedStyle() возвращает объект CSSStyleDeclaration.
Вычисленный стиль
Вычисленный стиль — это стиль, используемый в элементе после применения всех источников стилей.
Источники стилей: внешние и внутренние таблицы стилей, унаследованные стили и стили браузера по умолчанию.
См. также:
Синтаксис getComputedStyle()
window.getComputedStyle(element, pseudoElement)
Параметры getComputedStyle()
| Параметр | Описание |
|---|---|
| element | Обязательно. Элемент, для которого необходимо получить вычисленный стиль. |
| pseudoElement | Oнеобязательно. Псевдоэлемент, который нужно получить. |
Возвращаемое значение getComputedStyle()
| Тип | Описание |
|---|---|
| Object | Объект CSSStyleDeclaration со всеми свойствами и значениями CSS элемента. |
Ещё примеры getComputedStyle()
Получить все вычисленные стили из элемента:
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()
getComputedStyle() поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 9-11 |