• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Przycisk, który zmienia kolor divów

Aruba Cloud - Virtual Private Server VPS
+1 głos
917 wizyt
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

+1 głos
odpowiedź 11 maja 2021 przez VBService Ekspert (256,600 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. wink

<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 (256,600 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 (256,600 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 (256,600 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);

 

0 głosów
odpowiedź 11 maja 2021 przez wizarddos Nałogowiec (27,550 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.
});

 

komentarz 11 maja 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
Jak nie musisz to nie używaj JQuery
komentarz 11 maja 2021 przez wizarddos Nałogowiec (27,550 p.)
ok, ale dlaczego?
komentarz 11 maja 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
A po co Ci JQuery? To miało sens jakieś 10 lat temu...
komentarz 11 maja 2021 przez wizarddos Nałogowiec (27,550 p.)
No dobra, To czego w takim razie używać aby "miało sens"
komentarz 11 maja 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
Czystego JS w tym wypadku

Podobne pytania

0 głosów
2 odpowiedzi 1,920 wizyt
0 głosów
1 odpowiedź 323 wizyt
pytanie zadane 7 listopada 2018 w HTML i CSS przez rinausin Nowicjusz (150 p.)
–2 głosów
2 odpowiedzi 726 wizyt
pytanie zadane 26 grudnia 2019 w HTML i CSS przez sevenshow Początkujący (360 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...