JavaScript에서 요소의 정확한 CSS 속성 값(단위 포함)을 어떻게 얻을 수 있습니까?

요소 CSS 속성 값을 설정으로 가져오기(Percent/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