getComputedStyle: какой стиль на самом деле

Заданный стиль разбросан по многим местам: внешний файл, тег <style>, атрибут style, стили самого браузера. Вычисленный существует в единственном экземпляре — один набор значений на элемент, итог каскада, специфичности, наследования и значений по умолчанию. Именно он определяет, как элемент выглядит.

getComputedStyle(element) возвращает этот итог: объект, у которого любое CSS-свойство спрашивают по camelCase-имени — color, fontSize, paddingTop.

getComputedStyle — метод window, а не элемента. element.getComputedStyle() не существует, хотя рука тянется написать именно так.

const note = document.getElementById("note");

console.log(note.style.color);
console.log(getComputedStyle(note).color);
console.log(getComputedStyle(note).display);

const msg = document.getElementById("msg");

console.log(msg.style.color);
console.log(getComputedStyle(msg).color);

msg.style.color = "";
console.log(getComputedStyle(msg).color);

element.style — не «стиль элемента», а разобранный атрибут style. Нет атрибута — нет и значений, сколько бы правил ни оформляло элемент. Это не баг и не недоделка: объект честно отражает ровно одну строчку разметки.

Зато писать в него удобно: свойство сразу попадает в атрибут и получает в каскаде вес выше любого селектора (кроме !important). Обратная сторона — читать оттуда можно только то, что вы туда сами положили.

const chip = document.getElementById("chip");

console.log(chip.style.padding);
console.log(getComputedStyle(chip).paddingTop);

chip.style.padding = "4px";
console.log(chip.style.padding);
console.log(getComputedStyle(chip).paddingTop);

Вычисленный стиль — уже посчитанный. em и rem превращены в пиксели, ключевые слова приведены к каноническому виду, цвета — к rgb() или rgba(). Браузеру так удобнее, и вам обычно тоже: не нужно самому знать размер шрифта родителя.

Цена — потеря исходной записи. Строка "10px" не помнит, что в CSS стояло 0.5em, а "rgb(255, 0, 0)" не помнит слова red. Вычисленный стиль годится, чтобы узнать, но не чтобы «вернуть как было».

const inner = document.getElementById("inner");

console.log(inner.style.fontSize);
console.log(getComputedStyle(inner).fontSize);

const styles = getComputedStyle(document.getElementById("norm"));

console.log(styles.color);
console.log(styles.fontWeight);
console.log(styles.borderTopWidth);

То, что отдаёт getComputedStyle, спецификация называет resolved value. Для большинства свойств это вычисленное значение, а для размеров и координат — использованное: то, что реально получилось после раскладки. Поэтому width: 50% вернётся пикселями.

Отсюда неожиданность: у элемента с display: none раскладки нет, считать нечего — и вместо пикселей приходит объявленное значение, чаще всего auto.

const ghost = document.getElementById("ghost");

console.log(getComputedStyle(ghost).display);
console.log(getComputedStyle(ghost).width);

ghost.style.display = "block";
console.log(getComputedStyle(ghost).width.endsWith("px"));

Псевдоэлементов нет в DOM: textContent их не видит, querySelector не находит. Но стиль у них есть, и вторым аргументом getComputedStyle принимает строку с псевдоэлементом.

const tag = document.getElementById("tag");
console.log(tag.textContent);

const after = getComputedStyle(tag, "::after");
console.log(after.color);
console.log(after.content.length);

CSS-переменные живут отдельно от обычных свойств: поля accent у объекта нет, читать нужно через getPropertyValue("--accent"). Значение приходит почти как написано в CSS — вплоть до пробела в начале, поэтому привыкайте к .trim().

const badge = document.getElementById("badge");
const root = getComputedStyle(document.documentElement);

console.log(root.getPropertyValue("--accent").trim());
console.log(root.getPropertyValue("--missing"));
console.log(getComputedStyle(badge).color);

Первое ограничение — объект только для чтения. Попытка записать в него не «тихо не сработает», а бросит исключение. Менять стиль по-прежнему через element.style или переключение классов.

const styles = getComputedStyle(document.getElementById("ro"));
let failed = false;

try {
  styles.setProperty("color", "rgb(255, 0, 0)");
} catch (error) {
  failed = true;
}

console.log(failed);
console.log(styles.color);

Второе — объект живой. Это не снимок, а окно в текущее состояние: сохранили его в переменную, поменяли элемент — и то же самое поле отдаёт уже новое значение. Удобно, но означает, что каждое чтение может стоить браузеру пересчёта.

const live = document.getElementById("live");
const styles = getComputedStyle(live);

console.log(styles.width);

live.style.width = "80px";
console.log(styles.width);

const items = document.querySelectorAll("#rows p");

// пишем и тут же читаем — раскладка пересчитывается на каждом шаге
items.forEach((item) => {
  item.style.paddingLeft = "4px";
  console.log(getComputedStyle(item).paddingLeft);
});

Вместе getComputedStyle и getBoundingClientRect() работают в приборе пролога — необязательной части учебника о HTML и CSS. Примеры там печатают замеры строками вроде .box → width: 100px, а меряет за них подложка, которую на странице не видно. Как ею пользоваться, объясняет первая статья пролога, а здесь её можно прочитать изнутри. Вот функция, которой measure("адрес", "свойство") достаёт значение; stage в ней — сцена, элемент, в который пример кладёт свою разметку:

// прибор пролога: так measure("адрес", "свойство") достаёт значение
var px = function (n) { return Math.round(n * 100) / 100 + 'px'; };

var read = function (el, prop) {
  var s = stage.getBoundingClientRect(), r = el.getBoundingClientRect();
  if (prop === 'x') return px(r.left - s.left);
  if (prop === 'y') return px(r.top - s.top);
  if (prop === 'width') return px(r.width);
  if (prop === 'height') return px(r.height);
  if (CSS.supports(prop, 'inherit')) return getComputedStyle(el).getPropertyValue(prop).trim();
  return String(el[prop]);
};

Размеры и координаты прибор берёт у getBoundingClientRect(), округляя до сотых: x и y — разность прямоугольников элемента и сцены, то есть расстояние от края сцены, а не от окна. Свойства CSS отдаёт getComputedStyle, поэтому цвета в прологе печатаются как rgb(…), а размеры шрифта — пикселями. Имя свойства прибор получает таким, как оно пишется в CSS, и getPropertyValue("margin-top") его понимает, а getPropertyValue("marginTop") вернул бы пустую строку. Проверка CSS.supports(prop, 'inherit') отличает свойство CSS от прочих имён: значение inherit принимает любое свойство. Для checked или returnValue она ложна, и прибор читает одноимённое свойство самого элемента.