如何在 JavaScript 中获取元素的准确 CSS 属性值（包括单位）？

获取元素 CSS 属性值作为集合（百分比/Em/Px）

获取元素中指定的 CSS 属性值样式规则可能具有挑战性，特别是当属性已设置为不同的单位时。在 Google Chrome 中， getCompulatedStyle() 方法和 jQuery 的 css() 方法都返回以像素为单位的当前值。

解决方案： getMatchedStyle 函数

要解决此问题，开发了一个名为 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