- Теория
- Теория
Кекстаграм: наконец-то JavaScript
Всё готово для «оживления» интерфейса с помощью JavaScript. HTML-код Кекстаграма приведён в исходное состояние: фильтр ещё не выбран и к фото не применён.
Сначала включим фильтр toaster и применим его к фотографии. Для этого:
1. Найдём кнопку с классом toaster и сохраним её в переменную control:
var control = document.querySelector('button.toaster');2. Найдём блок с фотографией с классом photo и сохраним его в переменную photo:
var photo = document.querySelector('.photo');3. Теперь к кнопке, хранящейся в переменной control, добавим класс active:
control.classList.add('active');4. А к блоку большой фотографии, она уже в переменной photo, добавим класс toaster:
photo.classList.add('toaster');Теперь попробуйте повторить это сами. Обратите внимание, что при добавлении класса с помощью
classList.add точка в начале строки не пишется.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.