Kā mainīt elementa fona krāsu tīmekļa lapā?

Elementa fona krāsas maiņas galvenie veidi ir:

1. Ar izmantojot CSS īpašību background-color:

   /* Izvēlamies elementu pēc klases */
   .my-element {
     background-color: red; /* Uzstādām krāsu pēc nosaukuma */
   }
   
   /* Vai pēc id */
   #another-element {
     background-color: #00ff00; /* Uzstādām krāsu HEX formātā */
   }
   
   /* Vai pēc taga */
   div {
     background-color: rgb(0, 0, 255); /* Uzstādām krāsu RGB formātā */
   }
   
   /* Vai pēc atribūta */
   [data-type="button"] {
     background-color: rgba(255, 165, 0, 0.5); /* Uzstādām krāsu RGBA formātā (caurspīdīgums) */
   }
   

   Tas ir visizplatītākais un ieteicamākais veids statiskai stilizācijai:

2. Ar iebūvētiem stiliem:

   <div style="background-color: yellow;">
     Šis elements ar dzeltenu fonu.
   </div>
   

   Šī metode ir mazāk vēlams, jo tā sajauc HTML struktūru ar prezentāciju un sarežģī stilu pārvaldību lielās projektos:

3. Ar JavaScript:

   // Iegūst elementu pēc id
   const element = document.getElementById('myElementId');
   
   // Pārbauda, vai elements pastāv
   if (element) {
     // Maina background-color īpašību
     element.style.backgroundColor = 'blue';
   }
   
   // Vai iegūst elementus pēc klases
   const elements = document.getElementsByClassName('myClass');
   
   // Apstrādā kolekciju
   for (let i = 0; i < elements.length; i++) {
     elements[i].style.backgroundColor = 'purple';
   }
   

   JavaScript tiek izmantots dinamiskai stilu maiņai atkarībā no lietotāja darbībām, notikumiem vai citām prasībām:

Izvēle ir atkarīga no konteksta: pastāvīgai stilizācijai tiek izmantots CSS fails, nelieliem, specifiskiem stiliem — inline stili (dažreiz), bet dinamiskai maiņai — JavaScript. Stilu prioritāte ir noteikta ar CSS kaskādi.