JavaScript getComputedStyle() — реальний стиль елемента

Метод getComputedStyle() повертає підсумковий стиль елемента — той, який браузер справді застосував після всіх правил CSS.

правити

Загальний опис

Тут ховається різниця, якої не знають новачки. element.style показує лише інлайновий стиль — те, що написано в атрибуті style. Якщо колір задано в таблиці стилів, element.style.color поверне порожній рядок.

getComputedStyle() бачить усе: класи, каскад, успадкування, значення за замовчуванням.

Але є ціна: значення повертаються у підсумкових одиницях. Задав width: 50% — отримаєш '640px'. Задав колір #fff — отримаєш 'rgb(255, 255, 255)'.

Ним же читають значення CSS-змінних — і саме так JavaScript дізнається кольори теми, не дублюючи їх у коді.

правити

Нотатка

Виклик змушує браузер порахувати макет. У циклі це смертельно повільно: спершу зчитай усе, що треба, і лише потім міняй стилі — інакше кожен рядок буде викликати перерахунок.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
getComputedStyle	1+	1+	1+	7+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
getComputedStyle	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<style>.box { color: rebeccapurple; }</style>
<div id="box" class="box">Текст</div>

const box = document.getElementById('box');

console.log(box.style.color);                       // '' — порожньо!
console.log(getComputedStyle(box).color);           // 'rgb(102, 51, 153)'

// значення завжди підсумкові: відсотки стануть пікселями
console.log(getComputedStyle(box).width); // '640px', а не '50%'

// читання CSS-змінної — так JS дізнається кольори теми
const accent = getComputedStyle(document.documentElement)
    .getPropertyValue('--pico-primary')
    .trim();

console.log(accent);