Stílusosztályok alkalmazása JavaScriptben

Az elemek stílusozása a style attribútumon keresztül néha kényelmes, de legtöbbször - nem a legjobb ötlet. A probléma az, hogy a stílusok szétszóródnak a JavaScript fájlban, és nehézkes lesz őket módosítani. Sokkal kényelmesebb a stílusokat CSS fájlokban megadni, hogy könnyen lehessen módosítani őket anélkül, hogy a JavaScript kódot kellene bolyongatni.

Legyen például egy elemünk, amely kiír valamilyen üzenetet. Az üzenet lehet "jó" és zöld színnel jelenik meg, vagy "rossz" és piros színnel jelenik meg. A legjobb megoldás ebben az esetben az, hogy készítünk hozzá a megfelelő CSS osztályokat:

css.success {
  color: green;
}
.error {
  color: red;
}

Most a "jó" üzenet kiírásakor megadjuk az elemnek a "jó" osztályt:

javascriptelem.textContent = 'good';
elem.classList.add('success');

A "rossz" üzenet kiírásakor pedig megadjuk az elemnek a "rossz" osztályt:

javascriptelem.textContent = 'bad';
elem.classList.add('error');