Стилизация классами в 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');
Даны абзацы с числами. Переберите эти абзацы циклом и абзацы, содержащие четные числа, покарасьте в красный цвет, а содержащие нечетные - в зеленый.