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

2023-02-01

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

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

CSS:
JavaScript:
Функция getCSSCustomProp
Заключение

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, и, надеюсь, когда-нибудь она вам пригодится.

Пожалуйста, опубликуйте свои отзывы по текущей теме статьи. За комментарии, подписки, дизлайки, лайки, отклики низкий вам поклон!