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

Question

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);

 

Answer 1

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);

 

Comments

Wielkie dzięki

Answer 2

Kolor tekstu czy tekst? Temat nie zgadza się z pytaniem.

Zmiana koloru: https://developer.mozilla.org/pl/docs/Web/API/ElementCSSInlineStyle/style

Zmiana tekstu:

innerText - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText

textContent - https://developer.mozilla.org/pl/docs/Web/API/Node/textContent

innerHTML - https://developer.mozilla.org/pl/docs/Web/API/Element/innerHTML