jquery - 자바스크립트를 사용하여 상속된 CSS 값을 어떻게 가져올 수 있나요?

자바스크립트를 사용하여 상속된 CSS 속성의 값을 얻으려고 하고 있습니다. 포괄적인 답변을 찾지 못했습니다.

예시 CSS:

div {
    width: 80%;
}

예시 마크업:

<div id="mydiv"> Some text </div>

자바스크립트(jQuery 또는 네이티브)를 사용하여 요소의 너비를 가져와야 합니다 -- 픽셀이 아니라 문자열 "80%"로.

$('#mydiv').css('width'); // returns in px
$('#mydiv')[0].style.width // empty string
getComputedStyle($('#mydiv')[0]).width // returns in px

내가 값을 문자열로 가져와야 하는 이유는 스타일을 다른 요소에 복사해야 하기 때문입니다. 퍼센트로 선언된 경우, 다른 값도 퍼센트여야 합니다. px로 선언된 경우, 다른 값도 px여야 합니다.

진짜 요령은 이 속성이 명시적으로 요소에 선언된 것이 아니라 상속될 수 있다는 것입니다(내 예제와 같이).

누구 아이디어 있는 사람 있나요?

답변 #1

당신이 찾고 있는 것은 이 quirksmode.org 기사입니다. 이 기사는 함수를 제안합니다

function getStyle(el, styleProp)    {
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

그럼에도 불구하고, 당신은 그 기사를 주의 깊게 읽어야 합니다. styleProp의 이름들은 실제로 모든 브라우저에서 동일하지 않으며, 각기 다른 브라우저가 이것을 어떻게 처리하는지 볼 수 있을 것입니다. 오페라는 올바른 값을 보고하는 데 가장 좋은 지원을 하는 것 같습니다.

답변 #2

죄송하지만 백분율 값을 얻을 방법은 없습니다. 다음과 같은 방법을 시도해 볼 수 있습니다:

var widthpx = getComputedStyle($('#mydiv')[0]).width;
var parentWidth = $('#mydiv').parent().css('width')

var width = ( 100 * parseFloat(widthpx) / parseFloat(parentWidth) ) + '%';