Styling elements through the style
attribute is sometimes convenient, but most
often not the best idea. The problem is that
the styles will be scattered throughout the
JavaScript file and it will be difficult to
change them. It is much more convenient to
set styles in CSS files so that they can be
easily changed without digging into the
JavaScript code.
For example, let's say we have an element that displays some message. The message can be "good" and displayed in green and "bad" and displayed in red. The best solution in this case would be to make appropriate CSS classes for this:
.success {
color: green;
}
.error {
color: red;
}
Now, when displaying a "good" message, we will give the element a "good" class:
elem.textContent = 'good';
elem.classList.add('success');
And when displaying a "bad" message, we will give the element a "bad" class:
elem.textContent = 'bad';
elem.classList.add('error');
Given paragraphs with numbers. Go through these paragraphs in a loop and color in red the paragraphs containing even numbers, and those containing odd numbers in green.