• 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

VPS Starter Arubacloud
+1 głos
463 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 (251,170 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 (251,170 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 (251,170 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 (251,170 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 (25,130 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 (25,130 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 (25,130 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,731 wizyt
0 głosów
1 odpowiedź 224 wizyt
pytanie zadane 7 listopada 2018 w HTML i CSS przez rinausin Nowicjusz (150 p.)
–2 głosów
2 odpowiedzi 443 wizyt
pytanie zadane 26 grudnia 2019 w HTML i CSS przez sevenshow Początkujący (360 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...