最初に定義された CSS プロパティ値 (パーセンテージと EM 単位を含む) を取得するにはどうすればよいですか?

最初に定義された CSS プロパティ値を取得 (パーセント/EM/PX)

Web 開発では、元の CSS プロパティ値を取得することが重要な場合がありますその後の変更に関係なく、要素の CSS プロパティ値。これは、パーセントや em などの単位を使用する場合に特に当てはまります。多くの場合、計算値では代わりに px 値が提供されるためです。

問題の定義

問題は、getComputedStyle などの関数を使用するときに発生します。または 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>Output</strong></p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%

getMatchedStyle 関数を使用すると、CSS を正確に取得できます。後続のスタイルによって変更されたかどうかに関係なく、最初に定義されたとおりのプロパティ値。