Как изменить переменную css через js

Основные варианты использования 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!

Name already in use

translations / articles / per-harald-borgen-learn-css-variables-in-5-minutes / README.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents

Copy raw contents

Copy raw contents

Изучите CSS-переменные за 5 минут

Пользовательские свойства CSS (CSS Custom Properties), также известные как переменные — большая победа для разработчиков интерфейсов. Они приносят силу переменных в CSS, что приводит к уменьшению дублирования, повышению читабельности и большей гибкости.

Кроме того, в отличие от переменных в препроцессорах CSS, нативные переменные CSS фактически являются частью DOM, что даёт много преимуществ. Поэтому они по существу похожи на переменные SASS и LESS на стероидах. В этой статье я проведу ускоренный курс о том, как работает эта новая технология.

Я также создал бесплатный интерактивный курс из 8 частей по CSS-переменным, поэтому ознакомьтесь с ним, если вы хотите стать экспертом по этой теме.

Зачем изучать переменные CSS?

Есть много причин использовать переменные в CSS. Одна из наиболее убедительных из них — уменьшение дублирования в вашей таблице стилей.

В приведённом выше примере гораздо лучше создать переменную для цвета #ffeead , чем дублировать значение, что мы и делаем:

Это не только упрощает чтение кода, но и даёт больше гибкости, если нужно изменить цвет.

Сейчас в течение многих лет подобное на самом деле уже возможно делать, используя SASS- и LESS-переменные. Тем не менее, есть несколько преимуществ в случае CSS-переменных:

1. Они не требуют никаких инструментов для работы, поскольку они поддерживаются самим браузером. Таким образом, вам не нужна дополнительная настройка, как начать с ними работу, в отличие от SASS и LESS.
2. Они находятся в DOM, что открывает массу возможностей, о которых я расскажу в этой статье и в своём предстоящем курсе.

Теперь давайте начнём изучение CSS-переменных!

Объявление первой переменной CSS

Чтобы объявить переменную, вам сначала нужно решить, в какой области должна быть переменная. Если вы хотите, чтобы она была доступна глобально, просто определите её в псевдоклассе :root , который соответствует корневому элементу в дереве документов (обычно это тег <html> ).

Поскольку переменные наследуются, следующий ниже код следует вашу переменную доступной во всём вашем приложении, так как все ваши DOM-элементы являются потомками тега <html> .

Как вы можете видеть, вы объявляете переменную точно так же, как вы бы установили любое свойство CSS. Однако переменная должна начинаться с двух дефисов ( — ).

Для получения доступа к переменной, вам нужно использовать функцию var() и передать имя переменной в качестве первого параметра.

И это назначит вашему заголовку цвет #ff6f69 :

Функция var поддерживает второй параметр, фолбэк, то есть значение (или также CSS-переменная), которое будет использоваться, если переменная, переданная первым параметром, не определена, например:

Если переменная main-color недоступна, то будет использоваться черный цвет ( black ).

Объявление локальной переменной

Вы также можете создавать переменные с локальной областью видимости, который будут доступны только для того элемента, в котором они были объявлены, включая его дочерние элементы. Это имеет смысл делать, если вы знаете, что переменная будет использоваться только в определённой части (или частях) вашего приложения.

Например, у вас может быть окно с предупреждением, в котором используется определённый цвет, который не используется в других частях приложения. В этом случае скорее всего нецелесообразно определять этот цвет в глобальной области:

Теперь эта переменная может использоваться в дочерних элементах:

Если вы попытаетесь использовать переменную alert-color в другой части приложения, например, в навигационной панели, это не сработает: браузер просто проигнорирует такую строку CSS (за исключением, если не был предоставлен фолбэк вторым параметром).

Лёгкость реализации адаптивности с переменными

Большое преимущество CSS-переменных заключается в том, что они имеют доступ к DOM. Чего нельзя сказать о LESS или SASS, поскольку их переменные вставляются в обычный CSS.

На практике это означает, что вы можете, например, изменить переменные в зависимости от ширины экрана:

Всего четыре строки кода и вы изменили базовый размер шрифта при просмотре вашего приложения на маленьком экране. Довольно элегантно, не так ли?

Как получить доступ к переменным из JavaScript?

Доступ к CSS-переменным с помощью JavaScript — это ещё одно из преимуществ того, что CSS-переменные являются частью DOM. Вы можете обновлять их значения, что может пригодится, если вы хотите дать возможность вашим пользователям изменять внешний вид сайта (например, изменить размер шрифта).

Давайте продолжим на примере в начале этой статьи. Получение значение CSS-переменной через JavaScript занимает три строки кода:

Для обновления переменной CSS, просто вызовите метод setProperty на элементе, в котором была объявлена переменная, и передайте имя переменной в качестве первого параметра и новое значение — вторым.

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

В данный момент 77 процентов от глобального трафика сайтов поддерживают переменные CSS, причём почти 90 процентов в США. Мы уже используем CSS-переменные на Scrimba.com некоторое время, поскольку наша аудитория технически подкована и в основном использует современные браузеры.

Хорошо, на этом всё. Надеюсь, вы узнали что-то новое для себя.

Если вы хотите изучить его правильно, обязательно посмотрите мой бесплатный курс по CSS-переменным.

Слушайте наш подкаст в iTunes и SoundCloud, читайте нас на Medium, контрибьютьте на GitHub, общайтесь в группе Telegram, следите в Twitter и канале Telegram, рекомендуйте в VK и Facebook.

How do I edit a CSS variable using JS?

I have these CSS variables to control the colors of my project so I can do theming.

However no matter how I try to change the attribute(the two commented lines tried separately), the closest I get is returning not a valid attribute.

7 Answers 7

Turns out changing CSS variables is possible using the el.style.cssText property, or el.style.setProperty or el.setAttribute methods. In your code snippets el.setAttribute is incorrectly used, which is causing the error you encountered. Here’s the correct way:

Demo

The following demo defines a background color using a CSS variable, then changes it using the JS snippet 2 seconds after loading.

This will only work in browsers supporting CSS variables obviously.

If you are using :root :

It will be documentElement.

The native solution

The standard methods to get/set CSS3 variables are .setProperty() and .getPropertyValue() .

If your Variables are Globals (declared in :root ), you can use the following, for getting and setting their values.

However the getter will only return the value of a var, if has been set, using .setProperty() . If has been set through CSS declaration, will return undefined . Check it in this example:

To avoid that unexpected behavior you have to make use of the getComputedStyle() method , before calling .getPropertyValue() . The getter will then , look lik this :

In my opinion, accessing CSS variables should be more simple, fast, intuitive and natural.

My personal approach

I’ve implemented CSSGlobalVariables a tiny (<3kb) javascript module wich automatically detects and packs into an Object, all the active CSS global variables in a document, for easier acces & manipulation.

Any change applied to the Object properties, is translated automatically to the CSS variables, and viceversa.

CSS Change Variables With JavaScript

CSS variables have access to the DOM, which means that you can change them with JavaScript.

Here is an example of how you can create a script to display and change the —blue variable from the example used in the previous pages. For now, do not worry if you are not familiar with JavaScript. You can learn more about JavaScript in our JavaScript Tutorial:

Example

<script>
// Get the root element
var r = document.querySelector(‘:root’);

// Create a function for getting a variable value
function myFunction_get() <
// Get the styles (properties and values) for the root
var rs = getComputedStyle(r);
// Alert the value of the —blue variable
alert("The value of —blue is: " + rs.getPropertyValue(‘—blue’));
>

// Create a function for setting a variable value
function myFunction_set() <
// Set the value of variable —blue to another value (in this case "lightblue")
r.style.setProperty(‘—blue’, ‘lightblue’);
>
</script>

Browser Support

The numbers in the table specify the first browser version that fully supports the var() function.