Вчера узнал кое-что прикольное. Да, вы уже догадались… Я научился обновлять переменные CSS с помощью Javascript. как нам это сделать? Сначала нам нужно определить переменные внутри наших тегов ‹style›. Мы хотим поместить его в самую верхнюю точку кода, поэтому продолжим и поместим его в корневой каталог.
:корень {
— база: #ffc688;
— интервал: 10px;
— размытие: 10 пикселей;
}
Какие — ? Вот как мы определяем переменную в CSS. Теперь, когда у нас есть переменные. Мы можем начать использовать их в наших тегах изображений. Чтобы использовать наши переменные, вы просто заходите в элемент в CSS и добавляете var(-prop) к свойствам. Вот код, который я использовал:
картинка {
padding: var( — интервал);
background: var( — base);
фильтр: размытие(вар(-размытие))
}
Теперь, когда мы все подключены, мы будем использовать Javascript, чтобы позволить пользователю переключать свойства через интерфейс. Мы начнем с определения переменной, которая нацелена на все входные данные в разделе controls, а затем создадим функцию с именем handleUpdate и зарегистрируем значение в консоли. чтобы увидеть, работает ли код. Для этого нам нужно добавить прослушиватель событий, когда в наши входные данные вносятся изменения, и каждый раз запускать handleUpdate.
const ввод = document.querySelectorAll(‘.controls input’)
функция handleUpdate(){
console.log(это.значение)
}
input.forEach(input => input.addEvenetListener('change', handleUpdate))
Теперь мы можем видеть вносимые изменения, но по-прежнему не можем переключать свойства изображения. Стоит отметить, что у нас есть атрибуты данных во входных данных. Это просто дополнительная информация для разработчиков. В этом упражнении используется атрибут данных data-sizing, который соответствует "px". Поскольку только 2 из 3 входных данных имеют атрибуты данных, мы создадим переменную для хранения суффиксов, ИЛИ оставим ее пустой.
const ввод = document.querySelectorAll(‘.controls input’)
функция handleUpdate(){
константный суффикс = this.dataset.sizing || “ “
}
input.forEach(input => input.addEvenetListener('change', handleUpdate))
Мы добавим еще один слушатель событий к перемещению мыши на входах, а также определим логику обновления свойств внутри handleUpdate. Мы можем сделать это с помощью document.documentElement.style.setProperty. Используя ES6, мы можем внедрить свойство (this.name) и необходимые изменения (this.value).
const input = document.querySelectorAll(‘.controls input’)
функция handleUpdate () {
const суффикс = this.dataset.sizing || “ “
document.documentElement.style.setProperty(` — ${this.name}`, this.value + суффикс)
}
input.forEach(input => input.addEvenetListener('change', handleUpdate))
input.forEach(input =› input.addEvenetListener(‘mousemove’, handleUpdate))
