如何获取初始定义的CSS属性值（包括百分比和EM单位）？

获取初始定义的 CSS 属性值（百分比/EM/PX）

在 Web 开发中，检索原始值至关重要元素的 CSS 属性值，无论任何后续修改如何。当使用百分比或 em 等单位时尤其如此，因为计算值通常提供 px 值。

问题定义

使用 getCompulatedStyle 等函数时会出现问题或者 jQuery 的 css() 来获取当前的 CSS 属性值。这些方法返回以像素为单位的值，即使最初设置为其他单位。

解决方案：getMatchedStyle

要解决此问题，可以使用名为 getMatchedStyle 的自定义 JavaScript 函数受雇。此函数迭代元素的 CSS 规则，确定元素样式和重要规则的优先级。然后，它返回 CSS 规则中定义的初始值。

代码示例

function getMatchedStyle(elem, property) {
  // Check for element-defined property (highest priority)
  var val = elem.style.getPropertyValue(property);

  // If important, return immediately
  if (elem.style.getPropertyPriority(property)) return val;

  // Get matched CSS rules in descending priority order
  var rules = getMatchedCSSRules(elem);

  // Iterate through rules backwards to ensure correct priority
  for (var i = rules.length; i--;) {
    var r = rules[i];

    // Check if rule is important
    var important = r.style.getPropertyPriority(property);

    // Update value only if not set or if important rule encountered
    if (val == null || important) {
      val = r.style.getPropertyValue(property);

      // Return if important rule encountered
      if (important) break;
    }
  }

  return val;
}

示例用法

考虑以下 HTML 和 CSS：

<div class="b">first</div>
<div>
<p>以下 JavaScript 代码可以用于检索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%

通过使用getMatchedStyle函数，我们可以准确检索CSS属性值按照最初的定义，无论它们是否被后续样式修改。