異なるブラウザ間で JavaScript の HTML 要素のスタイル値を取得するにはどうすればよいですか?

JavaScript での HTML 要素のスタイル値の取得 JavaScript では、要素のインライン スタイルを取得するのは簡単です。ただし、 経由で設定されたスタイルにアクセスすることはできません。

計算されたスタイル値を取得するために、JavaScript は、 document.defaultView オブジェクトを通じてアクセスできる getComputedStyle メソッドを提供します。このメソッドは、クロスブラウザー形式の検索を標準化し、ピクセル単位に変換された値を表示します。使用方法は次のとおりです:

let element = document.getElementById("box"); let width = getComputedStyle(element).getPropertyValue("width"); Internet Explorer などの古いブラウザの場合は、別のアプローチが必要です。 IE は、キャメルケース形式のスタイル プロパティ名を期待し、元の単位で値を返す element.currentStyle プロパティをサポートしています。

let width = element.currentStyle.width; ブラウザ間の互換性を確保するには、次のようなヘルパー関数を使用できます。