如何取得初始定義的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屬性值按照最初的定義，無論它們是否被後續樣式修改。