Стилизација со класи во JavaScript
Да се стилизираат елементи преку атрибутот style
понекогаш е практично, но најчесто - не е
најдобрата идеја. Проблемот е што стиловите
ќе бидат раштркани низ JavaScript датотеката
и ќе биде тешко да се менуваат.
Многу е поупатно да се зададат стиловите во CSS
датотеки, за лесно да може да се менуваат,
без да се рови во JavaScript кодот.
Нека за пример имаме елемент, кој прикажува одредена порака. Пораката може да биде „добра“ и да се прикажува во зелена боја и „лоша“ и да се прикажува во црвена боја. Најдоброто решение во таков случај ќе биде да се направат соодветни CSS класи:
.success {
color: green;
}
.error {
color: red;
}
Сега при прикажување на „добра“ порака на елементот ќе му ја дадеме „добрата“ класа:
elem.textContent = 'good';
elem.classList.add('success');
А при прикажување на „лоша“ порака на елементот ќе му ја дадеме „лошата“ класа:
elem.textContent = 'bad';
elem.classList.add('error');
Дадени се параграфи со броеви. Прелистајте ги овие параграфи со циклус и параграфите кои содржат парни броеви, обојте ги во црвена боја, а оние кои содржат непарни - во зелена боја.
