규칙이 다음과 같다고 가정 해 보겠습니다.

.largeField {
    width: 65%;
}

픽셀 값이 아니라 어떻게 든 ’65 % ‘를 되 찾는 방법이 있습니까?

감사.

편집 : 불행히도 다른 스타일 시트를 가져 오는 스타일 시트가 있고 결과적으로 cssRules 매개 변수가 null 또는 정의되지 않은 값으로 끝나기 때문에 내 경우에는 DOM 메서드를 사용하는 것이 신뢰할 수 없습니다 .

그러나이 방법은 대부분의 간단한 경우에서 작동합니다 (하나의 스타일 시트, 문서 의 head 태그 내부에 여러 개의 개별 스타일 시트 선언 ).

답변

내장 된 방법은 없습니다. 다음과 같이 할 수 있습니다.

var width = ( 100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';

답변

가장 쉬운 방법

$('.largeField')[0].style.width

// >>> "65%"

답변

이것은 확실히 가능합니다!

먼저 부모 요소를 hide ()해야합니다. 이렇게하면 자바 스크립트가 하위 요소의 픽셀을 계산하지 못합니다.

$('.parent').hide();
var width = $('.child').width();
$('.parent').show();
alert(width);

내 예를 참조하십시오 .

자 …이 해킹을 처음 발견했는지 궁금합니다.)

최신 정보:

짧막 한 농담

element.clone().appendTo('body').wrap('<div style="display: none"></div>').css('width');

</body>태그 앞에 숨겨진 요소 가 남게됩니다 .remove().

한 줄짜리 예를 참조하십시오 .

나는 더 나은 아이디어에 열려 있습니다!

답변

document.styleSheets객체에 액세스 할 수 있습니다 .

<style type="text/css">
    .largeField {
        width: 65%;
    }
</style>
<script type="text/javascript">
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var i=0; i < rules.length; i++) {
        var rule = rules[i];
        if (rule.selectorText.toLowerCase() == ".largefield") {
            alert(rule.style.getPropertyValue("width"));
        }
    }
</script>

답변

늦었지만 새로운 사용자의 경우 CSS 스타일에 백분율이 포함되어 있으면 다음을 시도하십시오 .

$element.prop('style')['width'];

답변

Adams 답변을 기반으로 한 jQuery 플러그인 :

(function ($) {

    $.fn.getWidthInPercent = function () {
        var width = parseFloat($(this).css('width'))/parseFloat($(this).parent().css('width'));
        return Math.round(100*width)+'%';
    };

})(jQuery);

$('body').html($('.largeField').getWidthInPercent());

’65 % ‘를 반환합니다. if (width == ’65 %’)를 원할 경우 더 잘 작동하도록 반올림 된 숫자 만 반환합니다. Adams 답변을 직접 사용했다면 효과가 없었습니다 (64.93288590604027과 같은 것을 얻었습니다). 🙂

답변

timofey의 훌륭하고 놀라운 솔루션을 기반으로 한 순수한 Javascript 구현은 다음과 같습니다.

function cssDimensions(element)
  var cn = element.cloneNode();
  var div = document.createElement('div');
  div.appendChild(cn);
  div.style.display = 'none';
  document.body.appendChild(div);
  var cs = window.getComputedStyle
    ? getComputedStyle(cn, null)
    : cn.currentStyle;
  var ret = { width: cs.width, height: cs.height };
  document.body.removeChild(div);
  return ret;
}

누군가에게 도움이되기를 바랍니다.