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

JavaScript で HTML 要素のスタイル値を取得する方法

HTML 要素からスタイル値を取得することは、要素の外観を動的に操作するために不可欠です。 JavaScript を使用してスタイルを設定するのは簡単ですが、スタイル タグで定義されたスタイルにアクセスするのは難しい場合があります。

クロスブラウザーに関する考慮事項

要素スタイルにアクセスするには、クロスブラウザーのアプローチが必要です。 Internet Explorer は独自のプロパティ currentStyle を使用しますが、他のブラウザは W3C 標準に従って document.defaultView.getComputedStyle を利用します。

カスタム クロスブラウザ関数

クロスを処理するには-ブラウザの不一致、カスタム関数が頻繁に起こる採用:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    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;
  }
}

使用法

要素のスタイル プロパティを取得するには:

var element = document.getElementById("box");
var width = getStyle(element, "width");

現在の考慮事項

上記の関数は、特に返される色の場合、すべてのエッジ ケースを処理できるわけではありません。値は IE と他のブラウザ間で異なる場合があります。

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