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');

数字を含む段落が与えられています。これらの段落をループで処理し、偶数を含む段落は赤色に、奇数を含む段落は緑色に色付けしてください。