異なるブラウザ間で 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;

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

function getStyle(element, styleProp) {
  let value;
  if (document.defaultView && document.defaultView.getComputedStyle) {
    styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
    value = getComputedStyle(element).getPropertyValue(styleProp);
  } else if (element.currentStyle) {
    styleProp = styleProp.replace(/\-(\w)/g, str => str[1].toUpperCase());
    value = element.currentStyle[styleProp];
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
      return convertPixelValue(value);
    } else {
      return value;
    }
  }
  return value;
}

この関数はブラウザ間の違いを処理し、IE のレガシー プロパティと単位形式を標準に一致するように変換します。このヘルパーを使用すると、ブラウザ間で一貫して計算されたスタイル値を取得できます。

以上が異なるブラウザ間で JavaScript の HTML 要素のスタイル値を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。