Kaip pakeisti elemento foninę spalvą tinklalapyje…

Elemento fono spalvos keitimo pagrindiniai būdai yra:

Naudojant CSS savybę background-color:

/* Pasirinkti elementą pagal klasę */
.my-element {
  background-color: red; /* Nustatyti spalvą pagal pavadinimą */
}

/* Arba pagal id */
#another-element {
  background-color: #00ff00; /* Nustatyti spalvą HEX formatu */
}

/* Arba pagal žymę */
div {
  background-color: rgb(0, 0, 255); /* Nustatyti spalvą RGB formatu */
}

/* Arba pagal atributą */
[data-type="button"] {
  background-color: rgba(255, 165, 0, 0.5); /* Nustatyti spalvą RGBA formatu (permatomumas) */
}

Tai dažniausiai naudojamas ir rekomenduojamas būdas statiniam stiliavimui:

Naudojant inline stilius:
```
<div style="background-color: yellow;">
  Šis elementas su geltonu fonu.
</div>
```
Šis metodas yra mažiau pageidaujamas, nes jis maišo HTML struktūrą su prezentacija ir apsunkina stilių valdymą dideliuose projektuose:

Naudojant JavaScript:

// Gauti elementą pagal id
const element = document.getElementById('myElementId');

// Patikrinti, ar elementas egzistuoja
if (element) {
  // Keisti background-color savybę
  element.style.backgroundColor = 'blue';
}

// Arba gauti elementus pagal klasę
const elements = document.getElementsByClassName('myClass');

// Pereiti per kolekciją
for (let i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = 'purple';
}

JavaScript naudojamas dinamiškai keisti stilių priklausomai nuo naudotojo veiksmų, įvykių ar kitų sąlygų:

Pasirinkimas priklauso nuo konteksto: nuolatinis stilius taikomas CSS failu, mažiems, specifiniams stiliams — inline stiliais (kartais), o dinamiškai keisti — JavaScript. Stilių prioritetas nustatomas CSS kaspadu.

Kaip pakeisti elemento foninę spalvą tinklalapyje?