Как получить значения CSS переменных с помощью JavaScript

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

В прошлом, чтобы приобрести текущую контрольную точку без запроса ширины окна я делал что-то подобное:

CSS:

body::before { content: 'mobile'; display: none;}@media screen and(min-width: 30rem) { body::before { content: 'large-mobile'; }}@media screen and(min-width: 70rem) { body::before { content: 'desktop'; }}

JavaScript:

function getBreakpoint() { return getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/"/g, '');}

Данный подход отлично справляется со вашей задачей. Но пользовательские свойства CSS обладают большей гибкостью.

Функцию getCSSCustomProp

Мне необходимо было посмотреть, поддерживается ли Scroll Snap в моем компоненте JavaScript. Потом я понял, что CSS может предоставить решение для этого вопроса.

Я установил значение по умолчанию для компонента следующим образом:

.my-component { --supports-scroll-snap: 0;}

Потом, используя @supports, можно без проблем сделать следующее:

@supports(scroll-snap-type: x mandatory) {.my-component { --supports-scroll-snap: 1; }}

Далее JavaScript обрабатывает полученные данные:

const myComponent = document.querySelector('.my-component');const isSnapSupported = getCSSCustomProp('--supports-scroll-snap', myComponent, 'boolean');

Все это работает благодаря приведенной ниже возможности:

/** * Передаем элемент и его пользовательские свойства, значение которого нам надо. * Мы можем определить, какой тип данных получим в итоге. * * @param {String} propKey * @param {HTMLELement} element=document.documentElement * @param {String} castAs='string' * @returns {*} */const getCSSCustomProp =(propKey, element = document.documentElement, castAs = 'string') => { let response = getComputedStyle(element).getPropertyValue(propKey); // Если необходимо, приводим в порядок строку if(response.length) { response = response.replace(/"/g, '').trim(); } // Преобразуем возвращаемые данные в любой желаемый тип switch(castAs) { case 'number':    case 'int':      return parseInt(response, 10);    case 'float':      return parseFloat(response, 10);    case 'boolean':    case 'bool':      return response === 'true' || response === '1';  }  // Возвращаем результат return response;};

Заключение

Этот способ отличается от того, что я использовал для точек остановки в body. Основное отличие состоит в том, что мы передаем реальные свойства, а не скрываем значения. Так программный код стал гораздо чище.

Можете взять эту возможность из Gist, и, надеюсь, когда-нибудь она вам пригодится.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *