- Теория
- Теория
Кекстаграм: наконец-то 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
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.