Доступ к CSS-переменным и их изменение с помощью Javascript
И преимущество перед SASS-переменными
Перевод статьи Accessing and modifying CSS variables with Javascript с сайта hackernoon.com для CSS-live.ru, автор — ReasonCode
SASS-переменные с нами уже давно. Они позволяют задать переменную один раз во время выполнения (runtime) и использовать ее в нескольких местах. Уровень крутости — 3. Хотите уровень 6? Читайте дальше.
Взаимодействие с CSS-переменными при помощи JS после выполнения (post-runtime)
Создадим простую форму, которая будет использовать JS для динамического обновления CSS-переменных (в нашем случае, для изменения свойств color и margin у точки).
Давайте рассмотрим детально.
CSS
:root {
--footer-color: #2cba92;
/* @reasonCode зеленый */
--palatte-padding-left: 0px
}
footer {
width: 50px;
height: 50px;
margin-top: 20px;
margin-left: var(--palatte-padding-left); /* 11 */
background-color: var(--footer-color); /* 12 */
border-radius: 15px;
}
О CSS-псевдоклассе :root можно прочесть на MDN и W3Schools (англ. яз.) Цитата с MDN:
CSS-псевдокласс
:rootнаходит корневой элемент дерева документа. Применимо к HTML,:rootнаходит элемент <html> и идентичен селектору по тегу html, но его специфичность выше.
Мы определили CSS-переменные в селекторе :root. В строках 11-12 видно их использование. По стандарту CSS, переменная задается и используется с помощью префикса "--".
HTML
<body style="padding: 20px">
<label>Выберите свой любимый цвет:</label>
<input type="color" value="#2cba92">
<br/>
<label>Настройте отступ:</label>
<input type="range" id="margin" min="10" max="200" value="0">
<footer></footer>
</body>
Обратим внимание на атрибуты ползунка — элемента формы input с type=”range”. Они содержат минимальное (min) и максимальное (max) значения, а также исходное значение для value. Также посмотрим на поле выбора цвета — элемент формы input с type=”color”. Для него исходный цвет задан атрибутом value="#2cba92".
Javascript
const footer = document.querySelector('footer') // 1
const inputs = [].slice.call(document.querySelectorAll('input')); // 2
inputs.forEach(input => input.addEventListener('change', handleUpdate)); // 4
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); // 5
function handleUpdate(e) { // 7
if (this.type === 'color') {
footer.style.setProperty('--footer-color', this.value)
} else {
footer.style.setProperty('--palatte-padding-left', this.value + 'px')
}
}
Разберем построчно:
1 — получили элемент footer,
2 — получили коллекцию NodeList со всеми элементами input на странице,
4 — добавили метод EventListener для события CHANGE,
5 — добавили метод EventListener для события MOUSEMOVE (обновляет динамический отступ у ползунка),
7 — функция для установки значения нужной CSS-переменной (обратим внимание, что мы добавили “px” к переменной с отступом margin в строке 11).
Вот и всё про доступ к CSS-переменным и их изменение с помощью Javascript. Делитесь своим мнением, задавайте вопросы и, пожалуйста, читайте нас в Твиттере.
P.S. Это тоже может быть интересно:
Это все здорово, но я в тайне надеюсь что все-таки внедрят расширенную поддержку attr() в браузерах.
Почему то после прочтения складывается чувство что статья не закончена, странно как то, переменные главное объявляются в селекторе :root, а при изменении через JS прописываются инлайново для уже селектора footer, wtf?
F в области видимости. Присвоенное изменение будет применено только к содержимому footer, остальной контент будет использовать прежнее значение из :root, эту возможность неплохо-бы осветить в статье.
И что толку? Точно так же можно поменять стили используя jQuery.
$(‘footer’).css(‘background-color’, this.value)
Да как вы достали со своим JQuery! Везде и всюду его пытаетесь присунуть. Люди ещё и на чистом JS пишут, представляете?