Abr@X@bra.ru
Изменяем CSS переменные через JS
Изменяем CSS переменные через JS

Изменяем CSS переменные через JS

16.09.2017
93
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.

Делайте то, что вы любите и любите то, что вы делаете!

Подпишись на автора, чтобы не пропустить следующий пост.




CSS, Javascript
Читайте также:
GreenSock для начинающих: учебное пособие по веб-анимации (часть 2): GSAP’s Timeline

GreenSock для начинающих: учебное пособие по веб-анимации (часть 2): GSAP’s Timeline

Цель этой второй части GreenSock для начинающих - познакомить вас с TimelineMax от GreenSock.
Читать
Готовить front-end стало еще проще

Готовить front-end стало еще проще

В этом посте расскажу вам об одном классном сервисе, который сделает жизнь front-end разработчика еще проще и быстрее.
Читать
Дорожная карта веб-разработчиков в 2017 году

Дорожная карта веб-разработчиков в 2017 году

Эти диаграммы были созданы пользователем GitHub Kamranahmedse. Они визуализируют три дорожных карты, чтобы стать веб-раз...
Читать
Источник: css-live