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');