LearnJS

Получение вычисленных стилей элемента через getComputedStyle()

Функция getComputedStyle() возвращает итоговые CSS-значения элемента после применения правил из CSS, классов и inline-стилей. Она нужна, когда JavaScript должен узнать стиль, который браузер действительно применил.

Когда нужен getComputedStyle()

Значение может прийти из CSS-файла, класса, родительского элемента или правила @media. В таких случаях его часто нет в атрибуте style самого элемента, но браузер всё равно применяет его на странице.

Что возвращает getComputedStyle()

В функцию передают DOM-элемент, а она возвращает объект со стилями для чтения.

const styles = getComputedStyle(element);

Из него можно получить отдельное свойство, например styles.color, styles.fontSize или styles.display.

Получение значения

<p class="notice">Настройки сохранены</p>
.notice {
  color: #22543d;
  font-size: 16px;
}
const notice = document.querySelector('.notice');
const styles = getComputedStyle(notice);

console.log(styles.color); // rgb(34, 84, 61)
console.log(styles.fontSize); // 16px
console.log(styles.display); // block

Формат значений

Значения возвращаются строками. Браузер может привести их к своему формату: например, цвет из #22543d будет получен как rgb(34, 84, 61).

Поэтому не стоит сравнивать результат с исходной записью цвета в CSS. Проверяйте значение в том формате, который вернул браузер.

Отличие от style

element.style содержит только inline-стили и позволяет их изменять. getComputedStyle() читает итоговые значения, включая правила из CSS. Поэтому в этом примере notice.style.color будет пустой строкой: цвет задан CSS-правилом, а не атрибутом style.

getComputedStyle() предназначен только для чтения. Чтобы изменить внешний вид элемента, используйте element.style или CSS-класс.

Итого

getComputedStyle() помогает узнать итоговое CSS-значение элемента, даже если оно задано в CSS-файле или через класс. Результат используют для чтения, а стили изменяют через style или классы.