getElementById().style で CSS スタイル プロパティが空のままになる理由

getElementById() を使用して HTML 要素を取得すると、その要素にアクセスします#map {display: block} のような CSS スタイル ルールが存在するにもかかわらず、element.style.display 経由の style プロパティは空の値を返すことがよくあります。

この動作は、element.style がインライン スタイルのみを明示的に反映するために発生します。 HTML ドキュメント内の要素に設定します。インライン スタイルが定義されていない場合、element.style は空になります。

インライン スタイルと CSS ルールの両方を組み込んだ要素の実際の計算スタイルにアクセスするには、window.getComputedStyle() メソッドを利用します。このメソッドは、要素に適用される完全なスタイルを表す Style オブジェクトを提供します。

たとえば、console.log(window.getComputedStyle(document.getElementById('test')).display) を呼び出すと、「block, " #map {display: block} ルールを反映しています。

CSS を優先してインライン スタイル設定は一般的に推奨されませんが、element.style と window.getComputedStyle() の違いを理解することは、要素スタイルに正確にアクセスするために重要です。 JavaScript。