처음에 정의된 CSS 속성 값(퍼센트 및 EM 단위 포함)을 검색하려면 어떻게 해야 합니까?

초기 정의된 대로 CSS 속성 값 가져오기(Percent/EM/PX)

웹 개발에서는 원본을 검색하는 것이 중요할 수 있습니다. 후속 수정에 관계없이 요소의 CSS 속성 값입니다. 계산된 값은 대신 px 값을 제공하는 경우가 많기 때문에 백분율 또는 em과 같은 단위로 작업할 때 특히 그렇습니다.

문제 정의

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>Output</strong></p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%

getMatchedStyle 함수를 사용하면 CSS 속성 값을 정확하게 검색할 수 있습니다. 후속 스타일에 의해 수정되었는지 여부에 관계없이 원래 정의된 대로 유지됩니다.