Метод Window getComputedStyle()

Объект окна JavaScript

getComputedStyle()Метод возвращаетCSSStyleDeclarationОбъект, который содержит значения всех CSS-свойств элемента.

Стиль, вычисленный, это стиль, который действительно используется для отображения элемента, после применения стилей из множества источников.

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

можно использоватьCSSStyleDeclarationМетоды объекта или использование имен свойств CSS для индексации для доступа к значениям различных свойств CSS.

Синтаксис:

window.getComputedStyle(element, pseudoElement)

var heading = document.getElementsByTagName("h1")[0];
var x = window.getComputedStyle(heading, null).getPropertyValue("color");

Совместимость с браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает метод getComputedStyle():

Значение параметра

Технические детали

Более примеров

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

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.innerHTML = 'font-size: ' + compStyles.getPropertyValue('font-size');
para.innerHTML += '<br>line-height: ' + compStyles.getPropertyValue('line-height');
para.innerHTML += '<br>padding: ' + compStyles.getPropertyValue('padding');

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

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
for (let i = 0; i < compStyles.length; i++) {　
prop = compStyles.item(i);
txt += prop + " = " + compStyles.getPropertyValue(prop) + "<br>";
}

getComputedStyle() может извлекать стили из псевдоэлементов (например, ::after, ::before, :firstfirst и т.д.):

var div = document.getElementsByTagName("div")[0];
var x = window.getComputedStyle(div, "first-letter").getPropertyValue("font-size");

См. также

Учебник CSS:Учебник CSS

Учебник CSS:Псевдоэлементы CSS

Справочник по CSS:Свойства CSS

Справочник по JavaScript:Объект CSSStyleDeclaration

CSSStyleDeclaration:Метод getPropertyValue()

HTML-ссылка:Стильные свойства HTML

HTML-ссылка:Маркер <style> HTML

Объект окна JavaScript