スタイルの変更（styleプロパティ, classList.add/remove/toggle）

DOMの「スタイルの変更」には主に style プロパティ と classList メソッド群（add, remove, toggle） が使われます。それぞれの特徴と使い方を詳しく説明します。

1. `style` プロパティによる変更

DOM要素の インラインスタイル を直接操作する方法です。
個別のCSSプロパティを要素に設定できます。

特徴

要素の style プロパティにアクセスすることで、直接スタイルを変更。
CSSプロパティ名は キャメルケース に変換される（例：background-color → backgroundColor）。
インラインスタイルとして適用され、外部CSSより優先される。

使用例

html
<p id="text">サンプルテキスト</p>

<script>
  const p = document.getElementById("text");
  p.style.color = "red";             // 文字色を赤に変更
  p.style.backgroundColor = "yellow"; // 背景色を黄色に変更
  p.style.fontSize = "20px";         // フォントサイズを20pxに変更
</script>

2. `classList` を使った変更

要素の クラス属性 (class) を操作してスタイルを変更する方法です。
あらかじめCSSクラスを定義しておき、必要に応じてクラスを追加・削除・切り替えます。

特徴

CSSを使って再利用可能なスタイルを適用できるため、style プロパティよりも柔軟で保守性が高い。
DOM要素の classList プロパティは、クラス名を管理する便利なメソッドを提供。

(1) `classList.add()`

指定したクラスを追加します。既に存在する場合は無視されます。

html
<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
</style>

<p id="text">サンプルテキスト</p>

<script>
  const p = document.getElementById("text");
  p.classList.add("highlight"); // highlight クラスを追加
</script>

(2) `classList.remove()`

指定したクラスを削除します。

javascript
p.classList.remove("highlight"); // highlight クラスを削除

(3) `classList.toggle()`

指定したクラスが存在すれば削除、存在しなければ追加する「切り替え」を行います。
オプションで第2引数に true または false を渡すと、強制的に追加・削除が可能です。

javascript
p.classList.toggle("highlight"); // highlight を追加/削除
p.classList.toggle("highlight", true);  // 強制的に追加
p.classList.toggle("highlight", false); // 強制的に削除

3. 使い分けのポイント

一時的・個別的な調整 → style プロパティが便利
（例：ユーザー操作で色を変えるだけの場合）
再利用可能なデザインの適用 → classList を推奨
（例：ボタンのON/OFF状態の切り替え）

まとめ

style は 直接スタイルを適用するシンプルな方法。
classList は CSSクラスを操作してスタイルを柔軟に管理できる方法。
大規模な開発や保守性を考えると、基本は classList を使い、特殊な場合に style を使うのが一般的です。

ChatGPT5 生成日：2025/09/11

1. style プロパティによる変更

特徴

使用例

2. classList を使った変更

特徴

(1) classList.add()

(2) classList.remove()