Modificarea stilului elementelor

Pentru lucrul cu proprietățile stilistice ale elementelor în JavaScript, se folosesc, în principal, două abordări:

Modificarea proprietății style
Modificarea valorii atributului class

Proprietatea style

Proprietatea style reprezintă un obiect complex CSSStyleDeclaration și se corelează direct cu atributul style al elementului HTML. Acest obiect conține un set de proprietăți CSS, la care se poate accesa în următorul mod:

element.style.proprietateCSS

De exemplu, să setăm culoarea fontului unui titlu:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <h1 id="header">Home Page</h1>
   <script>
   const header = document.getElementById("header");
   // obținem valoarea proprietății color
   console.log(header.style.color);    // șir gol
   // modificăm valoarea proprietății color
   header.style.color = "navy";
   // obținem din nou valoarea proprietății color
   console.log(header.style.color);    // navy
   </script>
</body>
</html>

Aici, pentru titlu, stabilim culoarea albastră navy. În acest caz, numele proprietății color corespunde cu proprietatea css. Analog, am fi putut stabili culoarea folosind css:

#header{
   color:navy;
}

Cu toate acestea, unele proprietăți css în nume au un cratimă, de exemplu, font-family. În JavaScript pentru aceste proprietăți cratima nu este folosită. Doar prima literă, care vine după cratimă, este transformată în majusculă:

const header = document.getElementById("header");
header.style.fontFamily = "Verdana";

Proprietatea className

Cu ajutorul proprietății className, se poate obține sau seta valoarea atributului class al unui element HTML. De exemplu:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
   <style>
       .header-color {color:navy;}
       .header-font {font-family: Verdana;}
   </style>
</head>
<body>
   <h1 id="header" class="header-font">Home Page</h1>
   <script>
   const header = document.getElementById("header");
   // obținem clasa curentă
   console.log(header.className);  // header-font
   // setăm clasa elementului
   header.className = "header-color";  
   // obținem clasa curentă
   console.log(header.className);  // header-color
   </script>
</body>
</html>

Aici obținem clasa curentă a titlului și apoi o schimbăm pe cea nouă - "header-color". Datorită utilizării claselor, nu va trebui să configurăm fiecare proprietate css individual cu ajutorul proprietății style.

Totuși, trebuie avut în vedere că valoarea anterioară a atributului class este eliminată. Prin urmare, dacă trebuie să adăugăm o clasă, trebuie să combinăm numele acesteia cu clasa veche:

header.className = header.className + " header-color";

Și dacă trebuie să eliminăm toate clasele, atunci putem atribui proprietății un șir gol:

header.className = "";

Proprietatea classList

Mai sus am examinat cum se adaugă clase unui element, însă pentru gestionarea mai multor clase este mult mai convenabil să se folosească proprietatea classList. Această proprietate reprezintă un obiect care implementează următoarele metode:

add(className): adaugă clasa className
remove(className): elimină clasa className
toggle(className): comută clasa elementului pe className. Dacă clasa nu există, este adăugată, dacă există, este eliminată

De exemplu:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
   <style>
       .header-color {color:navy;}
       .header-font {font-family: Verdana;}
       .header-size {font-size: 22px;}
   </style>
</head>
<body>
   <h1 id="header" class="header-size">Home Page</h1>
   <script>
   const header = document.getElementById("header");
   header.classList.remove("header-size");     //  eliminăm clasa header-size
   header.classList.add("header-font");        // adăugăm clasa header-font
   header.classList.toggle("header-color");    // comutăm clasa header-color
   </script>
</body>
</html>

Trebuie de menționat că metoda toggle() poate accepta adițional o condiție ca al doilea parametru - dacă această condiție este adevărată (returnează true), atunci clasa este comutată:

const i = 5;
const condition = i > 0; // condiția
const header = document.getElementById("header");
header.classList.toggle("header-color", condition);    // comutăm clasa header-color în funcție de condiție

Dacă este necesar, putem parcurge toate clasele din lista classList sau obține clase individuale după index:

// parcurgerea listei de clase
for(headerClass of header.classList){
 

   console.log(headerClass);
}
console.log(header.classList[0]);   // prima clasă setată