Zmiana koloru tekstu <span> poprzez przycisk do zmiany kolorystyki strony

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

Dobry wieczór,

wie ktoś może czy da się jakoś zmienić poprzez css tekst w <span>? Mianowicie zrobiłem przycisk, który zmienia kolor wybranych divów, chcę również żeby zmienił kolor logo (którego 1 część tekstu ma kolor w <span>, druga natomiast kolor domyślny dla strony). Czy ktoś mógłby mi pomóc, ponieważ kompletnie pojęcia nie mam jak takie coś zrobić.
Z góry dziękuję!

		<div id="zmiana">
			<button>Zmiana</button> 
			</div>

        <div class="logo">
            <span style="color: rgb(66, 80, 156)">BlueGreen</span>White
        </div>

.greenlogo
{
    color:
}
.logo
{
	clear:both;
	font-size: 48px;
	text-align: center;
	width:auto;
    padding:40px;
}

function changeDivsColor() {
    [...document.querySelectorAll('.logo')].forEach(div => {
        div.classList.toggle('greenlogo');}
   
  const button = document.querySelector('button');
  button.addEventListener('click', changeDivsColor);

2 odpowiedzi

odpowiedź 14 maja 2021 przez VBService Ekspert (252,740 p.)
edycja 14 maja 2021 przez VBService

Najlepsza

Nie do końca dobrze rozumiesz kiedy użyć document.querySelectorAll a document.querySelector

<div id="zmiana">
  <button>Zmiana</button> 
</div>

<div class="logo">
  <span>BlueGreen</span>White
</div>

.greenlogo
{
  color: limegreen;
}
.logo
{
  clear: both;
  font-size: 48px;
  text-align: center;
  width: auto;
  padding: 40px;
  color: rgb(66, 80, 156);
}

function changeLogoColor() {
  const logo = document.querySelector('.logo span');
  logo.classList.toggle('greenlogo');
}

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