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

.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;
}

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

jQuery에서 전역 스타일 시트 값 가져 오기 에서 비슷한 문제가 발생하여 결국 위와 동일한 솔루션을 생각해 냈습니다 .

다른 사람들이 나중에 발견 한 내용을 활용할 수 있도록 두 질문을 교차 연결하고 싶었습니다.

jQuery로 액세스하는 데 필요한 스타일을 다음 중 하나에 넣을 수 있습니다.

1. 문서의 머리를 직접
2. 포함, 서버 측 스크립트가 헤드에 넣습니다.

그런 다음 문서 헤드의 스타일 태그 내 모든 것을 구문 분석하고 필요한 값을 반환하는 js 함수를 작성하는 것이 가능해야합니다 (반드시 쉽지는 않음).

css (width) 함수를 사용하여 요소의 현재 너비를 반환 할 수 있습니다.

즉.

var myWidth = $("#myElement").css("width");

참조 : http://api.jquery.com/width/ http://api.jquery.com/css/

jQuery에는 아무것도 없으며 자바 스크립트에서도 간단하지 않습니다. timofey의 답변을 받아 실행하여 원하는 속성을 가져 오는이 함수를 만들었습니다.

// gets the style property as rendered via any means (style sheets, inline, etc) but does *not* compute values
// domNode - the node to get properties for 
// properties - Can be a single property to fetch or an array of properties to fetch
function getFinalStyle(domNode, properties) {
    if(!(properties instanceof Array)) properties = [properties]

    var parent = domNode.parentNode
    if(parent) {
        var originalDisplay = parent.style.display
        parent.style.display = 'none'
    }
    var computedStyles = getComputedStyle(domNode)

    var result = {}
    properties.forEach(function(prop) {
        result[prop] = computedStyles[prop]
    })

    if(parent) {
        parent.style.display = originalDisplay
    }

    return result
}

교차 곱셈을 사용하여 픽셀에서 백분율로 변환합니다 .

공식 설정 :

1.) (element_width_pixels / parent_width_pixels) = (element_width_percentage / 100)

2.) element_width_percentage = (100 * element_width_pixels) / parent_width_pixels

실제 코드 :

<script>

   var $width_percentage = (100 * $("#child").width()) / $("#parent").width();

</script>