Вчера я экспериментировал с добавлением встроенных стилей с помощью JavaScript, чтобы создать работающие часы. Мы продолжим использовать CSS сегодня, когда создадим редактор изображений… штуковина. Да, давайте придерживаться этого.

Посмотрите все остальные дни в моем оглавлении!

Хорошо, обо всем по порядку: CSS-переменные или Пользовательские свойства — это новинка, и после двухминутного использования я их люблю и ненавижу. Они, наконец, привносят мощь переменных в CSS без использования препроцессоров CSS. Почему я их ненавижу? Хорошо, я покажу вам:

:root {
  --base: #00D8FF;  /* Mike 'Murkrage' Ekkel blue ;) */
  --spacing: 10px;
  --blur: 10px;
}

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

Хорошо, что там происходит. Что ж, мы применяем переменные к корню нашего документа, выбирая :root, который, если вы не знакомы, на самом деле является псевдоклассом для выбора корневого элемента документа. Затем мы устанавливаем переменные, как обычно, но на этот раз с дефисами, и мы можем использовать их где угодно.

img {
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}

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

Перейдем к коду JavaScript, поэтому вы читаете это:

document.querySelectorAll('.controls input')

Сейчас третий день, и я начинаю хорошо знакомиться с querySelector и querySelectorAll. Однако сегодня Уэс любезно объяснил, что последний возвращает NodeList, а не массив. Это очень похоже на массив, но это не так. У него есть только несколько методов, которые мы можем использовать, например forEach . Я рекомендую прочитать Запись MDN о NodeLists, чтобы узнать больше. Это крошечная статья, я все еще буду здесь, так что продолжайте читать ее :).

Теперь, когда у нас есть список всех входных данных, нам нужно посмотреть, не изменяются ли какие-либо из них. Как вы могли догадаться, для этого мы используем метод addEventListener.

function handleUpdate() {
  console.log(this.dataset.sizing)
}
inputs.forEach(input => input.addEventListener('change', handleUpdate))

Примечание: свойство this.dataset возвращает DOMStringMap, назовем его просто Object, который содержит все атрибуты data-. Пользовательские, которые мы добавляем к нашим элементам HTML.

Теперь, когда мы можем слушать изменения, Уэс отмечает, что это не происходит вживую. Это происходит при изменении, как и должно быть, но фактическое изменение не происходит, пока мы не отпустим курсор. Итак, чтобы исправить это, мы добавляем прослушиватель событий mousemove.

inputs.forEach(input => {
  input.addEventListener('change', handleUpdate);
  input.addEventListener('mousemove', handleUpdate);
}

Уэс написал его немного по-другому, так как он просто скопировал предыдущую строку и изменил ее на mousemove, но мне нравится читабельность моего кода немного лучше. Я не уверен, как это повлияет на производительность, но это работает так, как задумано.

Чтобы теперь изменить переменные или пользовательские свойства на основе входных данных, мы вызываем метод setProperty для корневого элемента:

document.documentElement.style.setProperty()

Метод принимает свойство, которое мы хотим изменить, и значение, которое мы хотим сохранить. Вся наша функция выглядит так:

function handleUpdate() {
  const suffix = this.dataset.sizing || '';
  document.documentElement.style.setProperty(
    `--${this.name}`, this.value + suffix
  ) 
}

Суффикс нужен для получения размера HTML-элемента. В этом случае нам нужно сказать px для размытия и границы. Мы получаем значения из набора данных, который содержит data-sizing для всех входных данных.

TIL (Сегодня я узнал)

  • В CSS есть переменные (я понятия не имел)
  • Доступ ко всем атрибутам данных можно получить с помощью dataset
  • QuerySelectorAll возвращает NodeList, который похож на массив, за исключением того, что он не
  • Пользовательские свойства CSS можно изменить с помощью метода setProperty.

Сегодняшний проект был еще одним небольшим, чтобы вы поработали с несколькими старыми вещами (старыми, как в день 1 и 2) и представили несколько новых вещей. Я думаю, это здорово, что это показывает, что простое приложение на основе ввода может быть легко достигнуто с помощью пары ползунков и примерно 7 строк кода.

Весь мой код можно найти на GitHub.

Посмотрите все остальные дни в моем оглавлении!

Уэс — замечательный учитель. Если вы хотите лучше освоить Javascript, посетите его бесплатный курс на javascript30.com.

До следующего раза!