Метод 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 Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница
  • Следующая страница
  • Вернуться на один уровень выше Объект Window