Вчера я экспериментировал с добавлением встроенных стилей с помощью 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.
До следующего раза!