JavaScript で要素の正確な CSS プロパティ値 (単位を含む) を取得するにはどうすればよいですか?

Get Element CSS Property Value as Set (Percent/Em/Px)

で指定された要素の CSS プロパティ値を取得します。スタイル ルールは、特にプロパティがさまざまな単位で設定されている場合に困難になることがあります。 Google Chrome では、getComputedStyle() メソッドと jQuery の css() メソッドはどちらも現在の値をピクセル単位で返します。

解決策: getMatchedStyle Function

この問題に対処するには、次のようにします。 getMatchedStyle() という JavaScript 関数が開発されました。要素とプロパティを引数として受け取り、CSS ルールで設定されたとおりの値を返します。

function getMatchedStyle(elem, property) {
  // Check element's own style first
  var val = elem.style.getPropertyValue(property);
  if (elem.style.getPropertyPriority(property)) return val;

  // Get matched CSS rules
  var rules = getMatchedCSSRules(elem);

  // Iterate rules in reverse order of priority
  for (var i = rules.length; i--;) {
    var r = rules[i];
    var important = r.style.getPropertyPriority(property);

    // Reset value if important or not yet set
    if (val == null || important) {
      val = r.style.getPropertyValue(property);
      if (important) break;
    }
  }

  return val;
}

例

次の HTML コードを考えてみましょう。 CSS ルール:

<div class="b">div 1</div>
<div>
<p>次の JavaScript コードでは、getMatchedStyle() を使用して、 div:</p>
<pre class="brush:php;toolbar:false">var d = document.querySelectorAll('div');

for (var i = 0; i <p><strong>結果:</strong></p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em