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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Функция getCSSCustomProp

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

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

Затем, используя @supports, я могу сделать это:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Затем, наконец, JavaScript запускает это:

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

Заключение

Этот трюк не отличается от оригинального хака, который я применил с контрольными точками для body. Основное отличие в том, что мы передаем реальные свойства, а не скрываем значения в контенте. Это чертовски чище. Вы можете получить эту функцию из этого Gist, и, надеюсь, она вам поможет.

Автор: Andy

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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