Школа
Веб-разработка

Как переключить тему оформления страницы Яваскриптом?

4 мая 2023
👁 2545   🗩1
Веб-разработка

Как переключить тему оформления страницы Яваскриптом?

4 мая 2023
👁 2545   🗩1
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 7
7
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

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

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

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

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

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

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

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

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработкаЯваскрипт
Полезно
 7
7
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Михаил Воробьев

Если речь, как в примере, идёт о тёмной теме, то следует заодно менять нативное свойство https://developer.mozilla.org/…‑US/docs/Web/CSS/color‑scheme — это позволит дефолтным контролам и скроллбарам оставаться контрастными по отношению к странице.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы