JavaScriptでのCSSクラスを使ったスタイリング

前のレッスンでは、style属性を変更することで要素のCSSスタイルを変更する方法を学びました。多くの場合、これはあまり良いアイデアではありません。その理由は、CSSスタイルをJavaScriptコードに散りばめてしまうと、その後サイトのデザインを変更するのが難しくなるからです。なぜなら、JavaScriptコードを掘り返して、埋め込まれたスタイルを探す必要が出てくるからです。

後のメンテナンスのためにより便利なのは、要素にCSSクラスを追加したり削除したりすることで、必要な方法でスタイルを適用することです。

例を見てみましょう。いくつかの段落があるとします:

html<p>text1</p>
<p>text2</p>
<p>text3</p>

どの段落をクリックしても、その段落が何らかの色、例えば緑色に変わるようにしてみましょう。そのために、CSSファイルに段落を着色するための特別なクラスを作ります:

css.colored {
  color: green;
}

クラスを使用する利点は、望ましい色を簡単に変更できるようになることです。そのためには、JavaScriptコードをいじらずに、単にCSSファイルに変更を加えるだけで済みます。特に、JavaScriptコードをあなたが書き、その後スタイルを（おそらくCSSのみ扱える、技量の低い）他の誰かが担当する場合、これは非常に便利です。

さて、クラスを導入したので、任意の段落をクリックすると、その段落にクラスを追加するだけで色を変更できるようになりました:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', function() {
    this.classList.add('colored'); // 段落にクラスを追加
  });
}