導入
Web開発において、JavaScriptで動的にデザインを変更したい場面は非常に多いです。特定のボタンを押した時に色を変えたり、アニメーションを開始したりといった操作を実現するために欠かせないのが「Element.style」プロパティです。CSSクラスの付け替えも一般的ですが、一時的な値の変更や、計算結果に基づくスタイル指定には、このAPIが最適です。
基礎知識
Element.styleは、DOM要素の「インラインスタイル（HTMLタグのstyle属性）」にアクセスし、編集するためのオブジェクトです。CSSで設定されたスタイル（外部スタイルシートなど）を直接読み取ることはできませんが、ここを操作することで、該当要素に対して直接スタイルを上書きできます。注意点として、CSSのプロパティ名は「kebab-case（例: background-color）」ですが、JavaScriptのプロパティ名としては「camelCase（例: backgroundColor）」を使用する必要があります。
実装/解決策
Element.styleを使用する際は、対象の要素を取得し、そのstyleオブジェクトに対して値を代入します。値は必ず「文字列」として指定してください。数値を扱う場合は、必要に応じて単位（pxやemなど）を付け加えるのを忘れないようにしましょう。
サンプルプログラム
以下のコードは、ボタンをクリックするとボックスのサイズと背景色がアニメーション風に変化する例です。
応用・注意点
現場で活用する際の重要なポイントが2つあります。
1つ目は、「スタイルのリセット」です。不要になったスタイルを無効化したい場合は、空文字（”）を代入してください。これにより、インラインスタイルが削除され、元のCSSの定義が適用されるようになります（例: element.style.display = ”）。
2つ目は、「優先順位」です。Element.styleで設定されたスタイルは、HTMLのタグに直接記述されるため、CSSファイルで定義されたスタイルよりも優先度が高くなります。安易に多用すると、後からCSSで修正が効かなくなる「スタイルの競合」を引き起こす可能性があるため、基本的にはCSSクラスの切り替え（classList.add/remove）を優先し、数値計算が必要な動的な値のみをElement.styleで制御するのが、保守性の高いコードを書くコツです。