JavaScriptにおけるCSSクラスを使用したスタイリングの利点

スタイルを直接変更する代わりにクラスを使用することには、 さらにもう一つの利点があります。手を軽く動かすだけで、 要素のスタイルを交互に切り替えることができます。

例えば、段落を初めてクリックしたときに特定の色に変え、 もう一度クリックしたときに元の色に戻すようにすることができます。 そのためには、単にメソッドaddをメソッドtoggleに変えるだけです：

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

for (let elem of elems) {
  elem.addEventListener('click', function() {
    this.classList.toggle('colored');
  });
}