Доступ к 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 у точки).

Демо на JSFiddle

Давайте рассмотрим детально.

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. Это тоже может быть интересно:

3 Комментарии
  1. Александр

    Это все здорово, но я в тайне надеюсь что все-таки внедрят расширенную поддержку attr() в браузерах.

  2. AVK

    Почему то после прочтения складывается чувство что статья не закончена, странно как то, переменные главное объявляются в селекторе :root, а при изменении через JS прописываются инлайново для уже селектора footer, wtf?

  3. Антон

    И что толку? Точно так же можно поменять стили используя jQuery.
    $(‘footer’).css(‘background-color’, this.value)

Добавить комментарий для Александр Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.