JavaScriptでのクラスを用いたスタイリング

属性styleを通して要素をスタイルすることは 時には便利ですが、ほとんどの場合、最良のアイデアとは言えません。 問題は、スタイルがJavaScriptファイル内に散らばってしまい、 変更することが煩雑になることです。 はるかに便利なのは、CSSファイル内でスタイルを設定することです。 そうすれば、JavaScriptのコードを掘り返すことなく、 簡単に変更することができます。

例として、何らかのメッセージを表示する要素があるとします。 メッセージは「良好」で緑色で表示されることもあれば、 「不良」で赤色で表示されることもあります。 このような場合の最善の解決策は、 それに対応するCSSクラスを作成することです：

css.success {
  color: green;
}
.error {
  color: red;
}

これで、「良好な」メッセージを表示する際には、 要素に「良好な」クラスを与えます：

javascriptelem.textContent = 'good';
elem.classList.add('success');

「不良な」メッセージを表示する際には、 要素に「不良な」クラスを与えます：

javascriptelem.textContent = 'bad';
elem.classList.add('error');