• 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

+1 głos
110 wizyt
pytanie zadane 11 maja 2021 w HTML i CSS przez bazyl8796 Użytkownik (850 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 Mędrzec (163,370 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 Użytkownik (850 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 Mędrzec (163,370 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 Mędrzec (163,370 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 Użytkownik (850 p.)
Dzięki wielkie!
komentarz 14 maja 2021 przez VBService Mędrzec (163,370 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 Pasjonat (17,720 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 Pasjonat (17,720 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 Pasjonat (17,720 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,486 wizyt
0 głosów
1 odpowiedź 108 wizyt
pytanie zadane 7 listopada 2018 w HTML i CSS przez rinausin Nowicjusz (150 p.)
–2 głosów
2 odpowiedzi 215 wizyt
pytanie zadane 26 grudnia 2019 w HTML i CSS przez sevenshow Początkujący (360 p.)

87,976 zapytań

136,557 odpowiedzi

304,510 komentarzy

58,337 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...