Как сделать одновременную смену цветов у блоков с разными цветами при нажатии на кнопку с возможностью при повторном клике вернуть цвет?

Рейтинг: 1Ответов: 1Опубликовано: 14.04.2023

При помощи Jquery сделал переключение на сайте день-ночь. Цель сделать переключение при нажатии на кнопку смены одновременно большого количества цветов у блоков. (https://github.com/serega467/beautiful/blob/master/images/change%20color%20block.jpg)

css javascript html jquery scss
Источник: Stack Overflow на русском

Ответы

▲ 1

У меня получилось так

const header = document.querySelector('.header')
const main = document.querySelector('.main');
const but = document.querySelector('.button')

function changeColor(){
    
    whatColorMain();
    whatColorHeader()
}

function whatColorMain(){

    if(main.style.background == "black"){
        main.style.background = "wheat"
        main.style.color = "black"

    }else{
        main.style.background = "black"
        main.style.color = "white"

    }
}
function whatColorHeader(){

    if(header.style.background == "black"){
        header.style.background = "wheat"
        header.style.color = "black"

    }else{
        header.style.background = "black"
        header.style.color = "white"

    }
}
 

.wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
 .header {
  position: relative;
  width: 100%;
  height: 20vh;
  background: wheat;
  text-align: center;
  border-bottom: 2px solid white;
 }
 .main {
  position: relative;
  width: 100%;
  height: 80vh;
  background: wheat;
  text-align: center;
  
 }
<div class="wrapper">
    <div class="header">header</div>
    <div class="main">
      main
      <button type="button" class="button">button</button>
    </div>
</div>