Стилизация с класове в JavaScript

Да се стилизират елементи чрез атрибута style понякога е удобно, но най-често това не е най-добрата идея. Проблемът е, че стиловете ще бъдат разпръснати из JavaScript файла и ще бъде трудоемко да се променят. Много по-удобно е да се задават стиловете в CSS файлове, за да могат лесно да се променят, без да се рови в JavaScript кода.

Нека за пример имаме елемент, който извежда някакво съобщение. Съобщението може да бъде "добро" и да се извежда в зелен цвят и "лошо" и да се извежда в червен цвят. Най-доброто решение в такъв случай ще бъде да се направят съответните CSS класове:

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

Сега при извеждане на "добро" съобщение ще даваме на елемента "добрия" клас:

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

А при извеждане на "лошо" съобщение ще даваме на елемента "лошия" клас:

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