JavaScriptによる要素スタイルの変更

ウェブ開発では、要素のスタイルを動的に変更する必要がよくあります。JavaScript では、要素の見た目を変更する主な方法として、style プロパティを使ったインラインスタイルの更新と、classList を使ったクラスの管理の2つがあります。

style プロパティを使ったインラインスタイルの変更

JavaScript の style プロパティを使用すると、HTML 要素のインライン CSS を直接変更できます。この方法では、個々の CSS プロパティを細かく制御できますが、インラインスタイルのみに適用され、その特定の要素だけに影響します。

要素の style オブジェクトにドット記法を使って、個々の CSS プロパティを変更できます。プロパティ名はキャメルケース（例：backgroundColor、background-color ではなく）で記述します。

style プロパティは、#box 要素のインラインスタイルを変更するために使用。各 CSS プロパティは個別の JavaScript プロパティ（例：box.style.backgroundColor）としてアクセスでき、要素のスタイルの特定部分を動的に変更可能。

classList による CSS クラスの追加と削除

classList プロパティは、CSS クラスの追加・削除・切り替えによって要素のスタイルを管理する、より柔軟で強力な方法。インラインスタイルを直接変更するよりも保守性が高く、外部 CSS ファイルを活用してスタイルと JavaScript ロジックを分離可能。

classList.toggle() は、ボタンがクリックされたときに highlight クラスを追加または削除するために使用。インラインの style 属性を煩雑にせず、保守性の高い事前定義された CSS ルールに依存。

実践例：テーマの切り替え

ユーザーが classList を使ってライトテーマとダークテーマを切り替えられる実践例。

classList.replace() は、現在の状態に基づいて light-theme クラスと dark-theme クラスを入れ替えるために使用。