01
Май
2019

Получение значения пользовательских свойств CSS с помощью JavaScript

Получение значения пользовательских свойств CSS с помощью JavaScript

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

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

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';
  }
}

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

Этот подход хорошо справляется с задачей, но с помощью пользовательских свойств CSS мы можем получить немного больше гибкости, и использование свойств для отправки значений кажется… ну… более правильным.

Функция getCSSCustomProp

Мне нужно было посмотреть, поддерживается ли привязка прокрутки CSS в компоненте JavaScript и с поиском решения на JavaScript было слишком долго возиться. До меня дошло, что CSS может для меня сделать это и передать статус обратно в JavaScript с помощью небольшой магии.

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

.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');

Это все работает от этой функции:

/**
 * Передаем элемент и его пользовательское свойство CSS, значение которого вы хотите получить.
 * Опционально вы можете указать, какой тип данных вы получите.
 *
 * @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, и, надеюсь, она вам поможет.

Автор: Andy

Источник: https://andy-bell.design

Редакция: Команда webformyself.

Share

Тебе может это понравится...