Переключатель цвета фона на сайте в 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. Какие кнопки будут, то здесь сами решите, да и вообще где такую неплохую идею можно задействовать. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |