ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Переключатель цвета фона на сайте в CSS

Переключатель цвета фона на сайте в CSS

Переключатель цвета фона на сайте в CSS
В данном материале представлен процесс про создание переключателя цветового фона для сайта в исполнение CSS и JavaScript, что делается по клику по кнопке. Также будет представлена ссылка для демонстрации, где рассмотрим пример в рабочем состояние, в котором все подробно будет показано и прописано. Вы вероятно встречали на кино сайтах, где установлен плеер, то можно потушить цвет, и по клику мы делаем страницу темной. Здесь почти аналогично, только мы меняем фоновый оттенок.

Где изначально в коде прописаны 3 гаммы цвета, это светлый, серый, и синий. Но все можно самостоятельно поменять на тот оттенок, который вам нужен, а также сделать переключатели, которые будут более красивее, так как здесь просто круги, это сделано для понятия данного эффекта. Сама функция вам вероятно понятно, мы просто по клику меняем цвет фона, что можно ставить на отдельные страницы, а также на просмотр материала, который смотрится, как на темном или светлом фоне.

Установка:

HTML

Код
<div class="kopesalen">
  <h1>Переключатель цветовой схемы</h1>
  <span class="asnulsabun" id="grey"></span>
  <span class="asnulsabun" id="white"></span>
  <span class="asnulsabun" id="blue"></span>
  <span class="asnulsabun" id="yellow"></span>
  <h2>Попробуйте нажать на один из цветов выше <span>изменить цвет фона этой страницы!</span></h2>  
  </div>

CSS

Код
.kopesalen {
  margin: 100px auto 100px;
  width: 80%;
  text-align: center;
}

.asnulsabun {
  width: 100px;
  height: 100px;
  border: solid black 2px;
  display: inline-block;
  border-radius: 50%;
}

#grey{
  background: grey;
}

#white{
  background: white;
}
#blue{
  background: blue;
}
#yellow{
  background: yellow;
}

JS

Код
const asnulsabuns = document.querySelectorAll('.asnulsabun');
const body = document.querySelector('body');

console.log(asnulsabuns);

asnulsabuns.forEach(function(asnulsabun){
  asnulsabun.addEventListener('click', function(e){
  console.log(e.target);
  if (e.target.id === 'grey'){
  body.style.backgroundColor = e.target.id;
  }
  if (e.target.id === 'white'){
  body.style.backgroundColor = e.target.id;
  }
  if (e.target.id === 'blue'){
  body.style.backgroundColor = e.target.id;
  }
  if (e.target.id === 'yellow'){
  body.style.backgroundColor = e.target.id;
  }
  })
})

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

Демонстрация
25 Июля 2023 Загрузок: 3 Просмотров: 637 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar