Урок: прочитать вычисленную CSS-переменную

Назначение

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

Как это работает

На собственной странице создайте элемент id variable-demo и задайте ему или родителю —lesson-gap: 12px. Код читает вычисленное представление и обрезает окружающие пробелы для удобного сравнения.

Пример

const element = document.querySelector("#variable-demo");
const computed = getComputedStyle(element);
const gap = computed.getPropertyValue("--lesson-gap").trim();
console.log("Вычисленная переменная:", gap);
console.log("Встроенный стиль:", element.style.getPropertyValue("--lesson-gap"));

Что должно получиться

При наследовании переменная видна в computed, хотя element.style может вернуть пустую строку. Style отражает встроенные объявления элемента, а не все применённые правила страницы.

Граница применения и частая ошибка

Незарегистрированная пользовательская переменная хранит набор токенов: строка calc(…) не обязана превратиться в готовое число пикселей при чтении самой переменной. Не применяйте parseFloat без понимания единиц. Для итоговой геометрии измеряйте используемое свойство или прямоугольник элемента.

Самостоятельная проверка

Задайте переменную родителю, затем переопределите на дочернем элементе и сравните результаты. Используйте var(—lesson-gap) в gap. Посмотрите отдельно вычисленную переменную и вычисленное свойство gap.

Связанные материалы

• Исходник и DOM
• Консоль
• Повторная проверка