Pure JavaScript を使用して HTML 要素からスタイル値を取得する方法

JavaScript を使用した HTML 要素からのスタイル値の取得

HTML 要素のスタイル属性の取得は、HTML 要素の外観を動的に操作するために不可欠です。この記事では、外部ライブラリの助けを借りずに、純粋な JavaScript を使用してスタイル値を取得する微妙な点について詳しく説明します。

CurrentStyle と計算されたプロパティ

スタイル値にアクセスするには、インライン スタイル (要素の style 属性内で定義) と計算されたプロパティ (実際に適用されるプロパティ) を区別する必要があります。

Internet Explorer は、element.currentStyle プロパティを使用して、元の単位で値を保持するインライン スタイルを取得します。

Mozilla およびその他の最新のブラウザは、 document.defaultView.getComputedStyle メソッドに依存します。計算されたプロパティを提供します。これらの値はピクセルに正規化され、ブラウザ間で一貫した表現を提供します。

クロスブラウザ ソリューション

次の関数は、インラインとインラインの両方を取得するためのクロスブラウザ ソリューションを提供します。計算されたスタイル:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // Convert styleProp to compatible notation
  styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
  // Modern browsers: computed properties
  if (defaultView && defaultView.getComputedStyle) {
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE: inline properties
    // Convert styleProp to camelCase notation
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // Normalize units 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;
  }
}

例

ID が「box」の要素のインライン幅プロパティを取得するには (スタイル タグで設定):

alert (getStyle(document.getElementById("box"), "width"));

計算された幅プロパティを取得するには、次のようになります。カスケードまたは継承されたスタイルを考慮します:

alert (getStyle(document.getElementById("box"), "width"));

制限事項

この関数は色の値を完全には処理しません。最新のブラウザは色を rgb 表記で返しますが、IE は元の定義を維持します。

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