Стилизовање класама у 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');