Стылізацыя класамі ў 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');