요소의 처음 정의된 CSS 속성 값을 효율적으로 검색하려면 어떻게 해야 합니까?

요소의 CSS 속성 값을 설정으로 추출

요소의 CSS 속성 값을 처음 정의된 대로 가져와야 하는 경우 getMatchedStyle 함수가 해결책을 제공합니다. 이 함수는 요소 스타일과 속성 중요도를 모두 고려하여 우선순위의 내림차순으로 일치하는 CSS 규칙을 반복합니다.

function getMatchedStyle(elem, property){
    var val = elem.style.getPropertyValue(property);
    if(elem.style.getPropertyPriority(property))
        return val;
    var rules = getMatchedCSSRules(elem);
    for(var i = rules.length; i--;){
        var important = r.style.getPropertyPriority(property);
        if(val == null || important){
            val = r.style.getPropertyValue(property);
            if(important)
                break;
        }
    }
    return val;
}

속성 중요도와 요소 스타일을 고려하여 getMatchedStyle은 stylesheet.

사용 예

다음 HTML 및 CSS를 고려하세요. 코드:

<div class="b">div 1</div>
<div>
<pre class="brush:php;toolbar:false">div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%; }
div#c.c  { width: 444px; }
x, div.a { width: 50%; }
.a       { width: 75%; }

다음 JavaScript 코드를 실행하면:

var d = document.querySelectorAll('div');

for(var i = 0; i <p>출력:</p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

이는 요소의 CSS 너비 값을 설정합니다.