Доступ к CSS-переменным и их изменение с помощью Javascript
Светлана Павлова
И преимущество перед SASS-переменными
SASS-переменные с нами уже давно. Они позволяют задать переменную один раз во время выполнения (runtime) и использовать ее в нескольких местах. Уровень крутости — 3. Хотите уровень 6? Читайте дальше.
Взаимодействие с CSS-переменными при помощи JS после выполнения (post-runtime)
Создадим простую форму, которая будет использовать JS для динамического обновления CSS-переменных (в нашем случае, для изменения свойств color и margin у точки).
Давайте рассмотрим детально.
О CSS-псевдоклассе :root можно прочесть на MDN и W3Schools (англ. яз.) Цитата с MDN:
CSS-псевдокласс :root находит корневой элемент дерева документа. Применимо к HTML, :root находит элемент <html> и идентичен селектору по тегу html, но его специфичность выше.
Мы определили CSS-переменные в селекторе :root . В строках 11-12 видно их использование. По стандарту CSS, переменная задается и используется с помощью префикса «—» .
Обратим внимание на атрибуты ползунка — элемента формы input с type=”range” . Они содержат минимальное ( min ) и максимальное ( max ) значения, а также исходное значение для value . Также посмотрим на поле выбора цвета — элемент формы input с type=”color” . Для него исходный цвет задан атрибутом value=»#2cba92″ .
Javascript
1 — получили элемент footer ,
2 — получили коллекцию NodeList со всеми элементами input на странице,
4 — добавили метод EventListener для события CHANGE,
5 — добавили метод EventListener для события MOUSEMOVE (обновляет динамический отступ у ползунка),
7 — функция для установки значения нужной CSS-переменной (обратим внимание, что мы добавили “ px ” к переменной с отступом margin в строке 11).
Вот и всё про доступ к CSS-переменным и их изменение с помощью Javascript. Делитесь своим мнением, задавайте вопросы и, пожалуйста, читайте нас в Твиттере.
Как редактировать переменную CSS с помощью JS?
у меня есть эти переменные CSS для управления цветами моего проекта, чтобы я мог делать тематику.
однако независимо от того, как я пытаюсь изменить атрибут(две прокомментированные строки пытались отдельно), ближайший, который я получаю, возвращает недопустимый атрибут.
6 ответов
оказывается, изменение переменных CSS возможно с помощью el.style.cssText свойства, или el.style.setProperty или el.setAttribute методы. В ваших фрагментах кода el.setAttribute используется неправильно, что вызывает ошибки. Вот правильный путь:
демо
следующая демонстрация определяет цвет фона с помощью переменной CSS, а затем изменяет его с помощью фрагмента JS через 2 секунды после загрузки.
это будет работать только в браузерах, поддерживающих переменные CSS, очевидно.
Если вы используете :root :
это будет documentElement.
вы можете просто использовать стандартный способ установки произвольных свойств CSS: setProperty
собственное решение
на стандартные способы для получения / установки переменных CSS3 являются .setProperty() и .getPropertyValue() .
если ваши переменные являются глобалами (объявленными в :root ), вы можете использовать следующее, Для получения и установки их значений.
однако геттер будет возвращать только значение var, если было установлено, используя .setProperty() . Если был установлен через объявление CSS, вернет undefined . Проверить его в пример:
чтобы избежать неожиданного поведения, вы должны использовать getComputedStyle() способ , перед вызовом .getPropertyValue() . Геттер потом посмотрел вот это :
на мой взгляд, доступ к переменным CSS должен быть более простым, быстрым, интуитивно понятным и естественным.
мой личный подход
я реализовал CSSGlobalVariables крошечный (для облегчения доступа и манипуляции.
любое изменение, примененное к свойствам объекта, автоматически преобразуется в переменные CSS.
Основные варианты использования CSS-переменных (Custom Properties)
CSS Variables или CSS Custom Properties уже давно используются в разработке и поддерживаются большинством популярных браузеров. Если у вас нет обязательного требования разрабатывать под IE, то вполне вероятно, вы уже успели оценить их преимущества.
По этой теме написано множество статей, но я сфокусируюсь на том, чтобы показать распространенные кейсы по использованию, которые сам применял на практике. Будет мало теории, но много кода.
Варианты использования
1. Определение переменных
Начнём с базовых вещей, а именно: как определять переменные. Стоит помнить, что их можно определить как в корневом элементе :root (переменные будут доступны по всему приложению), так и внутри любого селектора (будут доступны только для выбранного элемента и его дочерних элементов):
2. Переопределение переменных
В примере показан кейс, когда при наведении на элемент, должен меняться цвет. Для этого мы переопределяем переменную —color по событию :hover :
Второй пример показывает переопределение переменной в @media выражении. К сожалению, мы не можем вынести 1024px в переменную и использовать ее в @media — это является одним из ограничений CSS переменных.
3. Локальный fallback
Представьте, что вы вызываете переменную —color-green , а ее не существует. Страшного не случится, но заданное CCS-свойство не отработает. Для подстраховки можно задать резервное значение вторым аргументом. Это значение также может быть CSS-переменной:
4. Привязка переменных
При объявлении переменных могут использоваться другие переменные:
5. Переменные в calc()
В calc() можно перемножать числа со значениями в единицах измерения, н-р: px .
На выходе получим результирующее значение в той единице измерения, на которую умножили.
В примере показано, как перемножается 2 на 10px и в итоге получается 20px. Не важно, используем мы для этого обычные значения или CSS-переменные — результат будет одинаковый:
К примеру, у нас есть переменная —font: 20 . Но без указания единицы измерения мы не сможем ее корректно использовать в font-size .
Это можно решить с помощью calc() . Для преобразования числа в px , к примеру, достаточно умножить число на 1px в calc() :
6. Прозрачность в цветовых функциях
Задания цвета — самый распространенный кейс использования переменных.
Вот стандартный пример по использованию hex-цвета для определения значения переменной:
Часто бывает, что для цвета нужно задавать различную прозрачность. В CSS для этого есть:
#rrggbbaa hex color notation
Использование rgba()
При использовании переменных, удобнее это делать функцией rgba() , которая принимает 4 числовых значения для:
Альфа-канала для задания прозрачности
На самом деле, внутри CSS допускается использовать практически всё (за небольшим исключением), даже код на JavaScript!
Поэтому, задание в переменной значения цветов для Red, Green, Blue — вполне допустимо.
Вызовем функцию rgba() с переменной —color-blue—rgb . Для rgba() не хватает четвертого аргумента задающего прозрачность — добавим его через запятую:
На выходе собираются аргументы для rgba() : значения из переменной и альфа-канала.
По итогу получаем цвет:
Использование hsla()
Кроме rgba() можно использовать и hsla() . Это не так удобно, но как вариант, можно попробовать.
Определяем переменные с базовыми значениями для основных параметров hsla(): —hue , —saturation , —lightness , —opacity .
При использовании, указываем все базовые параметры в селекторе.
Меняем один / несколько переменных в селекторе (изменения коснутся только данного селектора и его дочерних элементов).
На выходе получаем цвет:
7. Переменные в SVG
С помощь переменных мы также можем изменять цвет внутри SVG: fill или stroke . Сложность заключается в том, что изображение SVG должно быть инлайново встроено на страницу, но при использовании сборщиков — это не проблема.
Итак, имеем SVG-элемент на странице, у которого в fill указана переменная —color :
И саму переменную —color в CSS:
Значение переменной можно переопределять при необходимых условиях: например, при событии hover на SVG:
Использование с JavaScript. API CSS Style Declaration
CSS переменные работают в runtime, в отличие переменных препроцессоров. Это значит, что мы можем получить к ним доступ в процессе работы приложения через JavaScript.
Рассмотрим, как можно работать с CSS переменными через JavaScript:
В CSS у нас есть 2 переменные:
А вот код на JavaScript:
Для примера, я показал все возможные действия с переменными: чтение, изменение, удаление. Использовать операции можно по необходимости.
Вычисленные свойства
В коде выше я затронул тему «Вычисленных свойств». Рассмотрим подробнее: для этого создадим небольшой пример:
Единицы измерения можно подразделить на абсолютные и относительные:
Абсолютные — это пиксели ( px ), которые привязываются к разрешению экрана.
Относительные (н-р: rem ) формируются относительно заданного параметра.
Для отображения, относительные единицы измерения должны быть преобразованы в абсолютные. Если мы откроем инспектор объектов в Google Chrome (или другом браузере) на вкладке «Elements», то сможем увидеть это преобразование:
В секции Styles — значения в том виде, в котором мы их указали в CSS (относительные).
В секции Computed — значения, приведенные к абсолютным единицам измерения. Функцией getComputedStyle в JavaScript мы как раз таки и получаем эти вычисленные значения.
Так для чего же может понадобиться работать с CSS-переменными через JavaScript? Самый распространенный кейс — это задание цветовой схемы: при переключении схемы мы обращаемся к CSS-переменной и просто изменяем ее значение. Все значения, где используется эта переменная, будут обновлены.
Небольшую демку по изменению цветовой схемы можно посмотреть здесь.
Проверка поддержки переменных
Достоинства и ограничения
Работают в runtime, в отличие от переменных препроцессоров
Можно обратиться из JavaScript
В именах обычных свойств CSS: var(—side): 10px
В значениях media-запросов: @media screen and (min-width: var(—desktop))
В подстановке URL: url(var(—image))
Нельзя сбрасывать значения всех переменных —: initial
Заключение
Использование CSS-переменных еще один шаг к отказу от препроцессоров. Ждем реализации миксинов @apply на CSS и CSS Nesting Module!