ブラウザ間で JavaScript の HTML 要素のスタイル値を取得する方法

JavaScript での HTML 要素のスタイル値の取得

以下に示すように、style タグを通じてスタイルが定義された要素の場合:

<style>
#box {
  width: 100px;
}
</style>

<div>

JavaScript を使用してスタイル値を取得するには、 element.style プロパティだけでは十分ではありません。これは、インラインまたは JavaScript で定義されたスタイルのみを提供するためです。

計算されたスタイル

要素の計算されたスタイルにアクセスします。これは、親から継承した後に要素に適用される実際のスタイルを表します要素と、適用される CSS ルールの説明。 JavaScript では、

1 の 2 つのメソッドを使用して計算されたスタイルを取得できます。 DOM 標準 (その他のブラウザ):

document.defaultView.getComputedStyle(element, null).getPropertyValue(propertyName);

2. IE 固有:

element.currentStyle[propertyName];

ただし、標準メソッドではハイフンでつながれたプロパティ名 (例: "font-size")、常にピクセル値を提供します。

クロスブラウザ解決策

ブラウザ間互換性のある方法で計算されたスタイルを取得するには、次の関数を使用します:

function getStyle(element, property) {
  var value, defaultView = (element.ownerDocument || document).defaultView;
  // Sanitize property name for different browsers
  property = property.replace(/([A-Z])/g, "-").toLowerCase();

  if (defaultView && defaultView.getComputedStyle) {
    return defaultView.getComputedStyle(element, null).getPropertyValue(property);
  } else if (element.currentStyle) {
    // Convert camelCase property name to hyphenated
    property = property.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });

    value = element.currentStyle[property];
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
      return (function(value) {
        var oldLeft = element.style.left, oldRsLeft = element.runtimeStyle.left;
        element.runtimeStyle.left = element.currentStyle.left;
        element.style.left = value || 0;
        value = element.style.pixelLeft + "px";
        element.style.left = oldLeft;
        element.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

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