Styling with classes in JavaScript

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.

enru