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

JavaScript での HTML 要素のスタイル値の抽出

インライン CSS またはスタイル タグを介して割り当てられたスタイル属性を取得するには、計算されたスタイルをフェッチする必要があります要素の style プロパティだけではなく。これには、document.defaultView.getComputedStyle や element.currentStyle などのブラウザー間互換性のあるメソッドを利用することが含まれます。

ブラウザー間の互換性

Internet Explorer は element.currentStyle を採用しますが、他のブラウザーは標準の document.defaultView.getComputedStyle メソッドに従います。標準形式ではダッシュが使用されるのに対し、IE では CSS プロパティ名がキャメルケース形式であることが想定されることに注意してください。

IE での単位変換

IE はサイズを元の単位で返しますが、標準形式ではサイズが返されます。メソッドは常にピクセルに変換されます。提供されている getStyle 関数は、必要に応じて IE で単位を変換することでこれに対応します。

カラー形式

標準メソッドはカラー値を RGB 表記で返しますが、IE ではカラー値が次のように表示されます。定義されています。 getStyle 関数は、特にカラー形式の場合、すべてのケースを完全に処理できるわけではありません。

計算されたスタイルを取得するためのカスタム関数

次の getStyle 関数は、クロスブラウザーのアプローチを提供します。計算されたスタイルを取得しています:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

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