Сегодня быстрый рецепт — переключение темы оформления страницы с помощью пары строк Яваскрипта.

Мы используем очень простой приём — переключение класса элемента по клику. Несмотря на простоту, у приёма куча вариантов применения. Если вы хорошо знаете ЦСС, то с помощью одного лишь переключения класса можно делать самые разные вещи: проигрывать анимации, изменять раскладку элементов, показывать и скрывать всплывающие окна и оповещения.

Код простой, попробуйте разобраться методом пристального вглядывания:

Теперь пара пояснений.

Общий принцип такой: описываем стили темы в отдельном классе, добавляем кнопку, вешаем на неё обработчик клика, добавляющий‑убирающий наш класс с body.

Команда toggle переключает класс, то есть убирает его, если он есть и добавляет, если его нет. Если заменить toggle на add или remove, можно, соответственно, явно добавлять или убирать класс.

Стили и скрипты обычно выносят в отдельные файлы, в примере всё в одном месте для наглядности.

Скрипты важно держать в конце страницы, чтобы к моменту их выполнения браузер уже отрисовал стоящие выше по коду ХТМЛ‑элементы. Если скрипты сработают раньше, чем будут отрисованы участвующие в них элементы, Яваскрипт выдаст ошибку и остановит выполнение кода.

Конечно, это самые‑самые азы Яваскрипта, но это те 20% знаний, дающие в итоге 80% результата. Остальное — дело практики и уточняющих запросов в Гугле :‑)