5. クラスとスタイルの切り替え

この章の目的

JavaScriptでHTML要素の見た目（CSS）を変更する方法を学びます。

クラスの追加・削除

classList を使って、CSSクラスを操作できます。

element.classList.add("done");
element.classList.remove("done");
element.classList.toggle("active");

ToDoアプリでの実践例

タスクが完了したときに、テキストに取り消し線を追加します。

if (task.done) {
  span.classList.add("done");
} else {
  span.classList.remove("done");
}

スタイルの直接変更

styleプロパティを使えば、直接CSSを設定できます。

element.style.color = "red";
element.style.backgroundColor = "#f0f0f0";

ただし、クラスでの制御が推奨されます。