Недавно я начал изучать язык js в одной из онлайн школ и первым же занятием меня научили менять цвет всего сайта с помощью небольшого скрипта, и я решил поделиться с читателями моего блога как это сделать.
Немного ниже будет вставлен небольшой кусочек сайта с iframe в котором можно будет проверить работоспособность этого небольшого скрипта.
Итак, с начала нам нужно найти главный селектор всего сайта, то есть класс присвоенный тегу body, у меня класс так и называется.
<body class="body dark">Дополнительно тегу body я присвоил класс dark, так как изначально предполагается темный фон сайта. Чтобы найти с помощью JS тег body нужно создать переменную и присвоить ей значение.
let body = document.querySelector('.body');Мы задали переменную body в которую запишется так сказать место положение селектора .body, следующим шагом нам нужно найти класс нашей кнопки которая будет переключать наш фон.
let button = document.querySelector('.button');Мы нашли оба селектора которые нам нужны и записали их в переменные, теперь нам нужно добавить функцию которая при нажатии на кнопку будет менять наш фон и цвет шапки и самой кнопки.
button.onclick = function() {
body.classList.toggle('red');
};Но, чтобы эта функция сработала, у нас в css файле должен быть прописан данный стиль иначе ничего не получится. Для этого в файле css прописываем стили.
.red {background-color: tomato;}
.red .button {background-color:yellowgreen;}
.red .menu {background-color:aquamarine;}Ну вот и все, при нажатии на кнопку у нас будет меняться стиль всех элементов сайта. Если вдруг у вас будут вопросы, пишите их в комментариях.
Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .