Cum se schimbă culoarea de fundal a unui element pe o…

Modul în care culoarea de fundal a unui element poate fi schimbată în principal în mai multe moduri:

Cu proprietatea CSS background-color:

/* Se selectează elementul după clasă */
.elementul-meu {
  background-color: red; /* Se setează culoarea după nume */
}

/* Sau după id */
#alt-element {
  background-color: #00ff00; /* Se setează culoarea în format HEX */
}

/* Sau după tag */
div {
  background-color: rgb(0, 0, 255); /* Se setează culoarea în format RGB */
}

/* Sau după atribut */
[data-type="button"] {
  background-color: rgba(255, 165, 0, 0.5); /* Se setează culoarea în format RGBA (cu transparență) */
}

Acesta este cel mai răspândit și recomandat mod pentru stilizarea statică.

Cu stiluri inline:
```
<div style="background-color: yellow;">
  Acest element are fundal galben.
</div>
```
Această metodă este mai puțin preferată, deoarece amestecă structura HTML cu prezentarea și complică gestionarea stilurilor în proiecte mari.

Cu JavaScript:

// Obține elementul după id
const element = document.getElementById('myElementId');

// Verifică dacă elementul există
if (element) {
  // Modifică proprietatea background-color
  element.style.backgroundColor = 'blue';
}

// Sau obține elemente după clasă
const elements = document.getElementsByClassName('myClass');

// Parcurge colecția de elemente
for (let i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = 'purple';
}

JavaScript este folosit pentru modificarea dinamică a stilurilor în funcție de acțiunile utilizatorului, evenimente sau alte condiții.

Alegerea metodei depinde de context: pentru stilizarea permanentă se folosește un fișier CSS, pentru stiluri mici și specifice - stiluri inline (uneori), iar pentru modificări dinamice - JavaScript. Prioritatea stilurilor este determinată de cascada CSS.

Cum se schimbă culoarea de fundal a unui element pe o pagină web?