javascript - 단위 요소 CSS 속성 (너비 / 높이) 값을 설정대로 가져옵니다 (퍼센트 / em / px / 등).




2 Answers

WebKits getMatchedCSSRules() 호출하는 것만 큼 단순하지는 않습니다. 우선 순위 순서대로 일치하는 규칙을 반환합니다 (문서에서이 순서에 대해 언급하지는 않았지만). 순서는 속성에 중요한 우선 순위를 고려하지 않으며 요소 스타일을 포함하지 않습니다. 그래서 나는이 함수로 끝났다.

getMatchedStyle

function getMatchedStyle(elem, property){
    // element property has highest priority
    var val = elem.style.getPropertyValue(property);

    // if it's important, we are done
    if(elem.style.getPropertyPriority(property))
        return val;

    // get matched rules
    var rules = getMatchedCSSRules(elem);

    // iterate the rules backwards
    // rules are ordered by priority, highest last
    for(var i = rules.length; i --> 0;){
        var r = rules[i];

        var important = r.style.getPropertyPriority(property);

        // if set, only reset if important
        if(val == null || important){
            val = r.style.getPropertyValue(property);

            // done if important
            if(important)
                break;
        }
    }

    return val;
}

주어진 다음의 코드 및 스타일 규칙 :

<div class="b">div 1</div>
<div id="a" class="a d2">div 2</div>
<div id="b" class="b d3" style="width: 333px;">div 3</div>
<div id="c" class="c d4" style="width: 44em;">div 4</div>

<style>
div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%;   }
div#c.c  { width: 444px; }
x, div.a { width: 50%;   }
.a       { width: 75%;   }
</style>

이 JS 코드

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

for(var i = 0; i < d.length; ++i){
    console.log("div " + (i+1) + ":  " + getMatchedStyle(d[i], 'width'));
}

div 대해 다음 너비를 제공합니다.

div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

( jsFiddle에서 )

css vh

CSS 규칙으로 설정된대로 요소 CSS 속성 (예 : 너비 / 높이)을 가져올 수 있습니다 (예 : percent / em / px). (Google 크롬에서는 프레임 워크가 필요하지 않음).

getComputedStyle 사용하면 현재 값을 픽셀 단위로 반환하므로 jQuery에서 css() 마찬가지입니다.

예 :

<div class="b">first</div>
<div id="a" class="a">second</div>

<style>
     div      { width: 100px; }
     x, div#a { width: 50%;   }
     .a       { width: 75%;   }
</style>

이 예제에서 모든 div 요소를 반복하면서 두 번째 div 의 너비를 50% (그리고 첫 번째는 100px )로 할 수 있기를 바랍니다.

Chrome 요소 관리자는 CSS 속성 값을 설정 한대로 표시 할 수 있으므로 Chrome에서 가능해야합니다.

허용 된 답은 거기에 어떤 종류의 너비가 설정 되더라도 백분율 너비를 생성하는 간단한 해킹이 있으므로 링크 된 질문 의 정확한 복제본아닙니다 . 나머지는 활성 규칙을 만드는 데 사용되는 선택기를 알아야합니다. 어떻게 알았을까요?




here 큰 대답이있는 새로운 중복 게시물이 here . 그 대답은 jQuery를위한 것이지만 순수 js 로 구현하는 것은 쉽습니다.

function getDefaultStyle(element, prop) {
    var parent = element.parentNode,
        computedStyle = getComputedStyle(element),
        value;
    parent.style.display = 'none';
    value = computedStyle.getPropertyValue(prop);
    parent.style.removeProperty('display');
    return value;
}





Related