Стилизация с класове в 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');
Дадени са абзаци с числа. Обходете тези абзаци с цикъл и абзаците, съдържащи четни числа, оцветете в червен цвят, а съдържащите нечетни - в зелен.
