Przycisk, który zmienia kolor divów

pytanie zadane 11 maja 2021 w HTML i CSS przez bazyl8796 Obywatel (1,020 p.)

Cześć,
wytłumaczy mi ktoś, albo podeśle link poradnika, do zrobienia przycisku, który po kliknięciu będzie zmieniał kolor danych divów? Kompletnie nie wiem jak to zrobić, a na necie ciężko to znaleźć.
Pozdrawiam

3 odpowiedzi

odpowiedź 11 maja 2021 przez VBService Ekspert (246,070 p.)
wybrane 12 maja 2021 przez bazyl8796

Najlepsza

Przydatny też może być document.querySelectorAll(), aby w łatwy sposób zmienić kolor grupie elementów.

<div>
  <button>zmiana</button>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>

button {
  display: block;
}
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 1em;
  background-color: red;
  border: 2px solid transparent;
  transition: all 1s;
}

.blue {
  background-color: blue;
  /* 
      poniżej przykład: więcej styli można zmieniać 
      w jednym czasie, co daje ciekawe efekty w
      połączeniu z "transition"
  */
  border: 2px solid red;
  border-radius: 1em;
}

function changeDivsColor() {
  [...document.querySelectorAll('.box')].forEach(div => {
    div.classList.toggle('blue');
  })
}

const button = document.querySelector('button');
button.addEventListener('click', changeDivsColor);

[ Element.classList ]

komentarz 14 maja 2021 przez bazyl8796 Obywatel (1,020 p.)
przywrócone 14 maja 2021 przez bazyl8796

Wiesz może jak zrobić, by ten przycisk (z Twojego kodu) zmieniał kolor różnych niezależnych od siebie divów? Teraz jest, że zmienia tylko .box, a ja bym chciał żeby zmieniał jeszcze np. #circle i .square. Mógłbyś mi pomóc jeszcze na koniec :)?
Z góry dzięki

komentarz 14 maja 2021 przez VBService Ekspert (246,070 p.)

<div>
  <button>zmiana</button>
  <div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
  <div>
    <div id="circle" class="red"></div>
    <div id="circle" class="red"></div>
    <div id="circle" class="red"></div>
  </div>
</div>

button {
  display: block;
}
.square {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 1em;
  background-color: red;
  transition: all 1s;
}
#circle {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 1em;
  border-radius: 50%;  
  transition: all 1s;
}
 
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

function changeDivsColor() {
  [...document.querySelectorAll('.square')].forEach(div => {
    div.classList.toggle('blue');
  });
  [...document.querySelectorAll('#circle')].forEach(div => {
    div.classList.toggle('blue');
  });
}

const button = document.querySelector('button');
button.addEventListener('click', changeDivsColor);

komentarz 14 maja 2021 przez VBService Ekspert (246,070 p.)

<div>
  <button>zmiana</button>
  <div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
  <div>
    <div id="circle" class="red"></div>
    <div id="circle" class="red"></div>
    <div id="circle" class="red"></div>
  </div>
</div>

button {
  display: block;
}
.square {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 1em;
  background-color: red;
  transition: all 1s;
}
#circle {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 1em;
  border-radius: 50%;  
  transition: all 1s;
}
 
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

function changeDivsColor() {
  ['.square','#circle'].forEach(divs =>{
    [...document.querySelectorAll(divs)].forEach(div => {
      div.classList.toggle('blue');
    });
  })
}

const button = document.querySelector('button');
button.addEventListener('click', changeDivsColor);

1	komentarz 14 maja 2021 przez bazyl8796 Obywatel (1,020 p.) Dzięki wielkie!

komentarz 14 maja 2021 przez VBService Ekspert (246,070 p.)
edycja 14 maja 2021 przez VBService

<div class="container">
  <button>zmiana</button>
  <div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
  <div>
    <div id="circle" class="red"></div>
    <div id="circle" class="red"></div>
    <div id="circle" class="red"></div>
  </div>
  <div>
    <div class="rectangle red"></div>
    <div class="rectangle red"></div>
    <div class="rectangle red"></div>
  </div>
  <div>
    <div class="triangle"></div>
    <div class="triangle"></div>
    <div class="triangle"></div>
  </div>  
</div>

* {
  box-sizing: border-box;
}
button {
  display: block;
}
.container div {
  margin: 1em;
  transition: all 1s;
}
.square {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
}
#circle {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%; 
}
.rectangle {
  display: inline-block;
  width: 200px;
  height: 100px;
}
.triangle {
  position: relative;
  top: -100px;
  display: inline-block;
  width: 150px;
  height: 50px;
  border: 100px solid black;
  border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: red;
}

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.orange {
  background-color: orange;
}
.brown-rotate {
  border-bottom-color: brown;
  transform: rotate(180deg);
  top: 0;
}

function changeDivsColor() {
  const divs = [
    { id:'.square', css:'green' }, { id:'#circle', css:'blue' },
    { id:'.rectangle', css:'orange' }, { id:'.triangle', css:'brown-rotate' },
  ];

  divs.forEach(div =>{
    [...document.querySelectorAll(div.id)].forEach(single_div => {
      single_div.classList.toggle(div.css);
    })
  })
}

const button = document.querySelector('button');
button.addEventListener('click', changeDivsColor);

odpowiedź 11 maja 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

odpowiedź 11 maja 2021 przez wizarddos Pasjonat (24,860 p.)

Na pewno dobrze tu użyć JS'a

zacznijmy od kodu HTML

<div class = "div1" id = "div">
</div>
<button>Zmień kolor</button>

I CSS dla tego div'a

.div1{
  height: 100px;
  width: 100px;
  background-color: #000;
}

kolejnym z potrzebnych części jest JS (tutaj biblioteka JQuery)

aby zmienić wartości css używamy funkcji Jquery css() oraz funkcji do obsługi zdarzeń on()

  $("button").on("click", $("#div").css("background-color", "#ff0000"));

w praktyce wygląda to tak

a dla większej ilości div'ów zmienić lekko js'a

 $("button").on("click", function(){
    $("#div1").css("background-color", "#ff0000");
    $("#div2").css("background-color", "#ff0000");
    //etc.
});