Digamos que a regra seja a seguinte:

.largeField {
    width: 65%;
}

Existe uma maneira de obter '65% 'de volta de alguma forma, e não o valor do pixel?

Obrigado.

EDIT: Infelizmente, o uso de métodos DOM não é confiável no meu caso, pois tenho uma folha de estilo que importa outras folhas de estilo e, como resultado, o parâmetro cssRules acaba com um valor nulo ou indefinido .

Essa abordagem, no entanto, funcionaria na maioria dos casos simples (uma folha de estilo, várias declarações de folha de estilo separadas dentro da tag head do documento).

Receio que não haja uma maneira embutida. Você pode fazer algo assim:

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

Maneira mais facil

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

// >>> "65%"

Isso é definitivamente possível!

Você deve primeiro ocultar () o elemento pai. Isso impedirá que o JavaScript calcule pixels para o elemento filho.

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

Veja meu exemplo .

Agora ... Eu me pergunto se sou o primeiro a descobrir esse hack :)

Atualizar:

One-liner

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

Ele deixará um elemento oculto antes da </body>tag, o que você pode desejar .remove().

Veja um exemplo de one-liner .

Estou aberto a ideias melhores!

Você pode acessar o document.styleSheetsobjeto:

<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>

Atrasado, mas para usuários mais novos, tente fazer isso se o estilo css contiver uma porcentagem :

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

Um plugin jQuery baseado na resposta de Adams:

(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());​​​​​

Retornará '65% '. Só retorna números arredondados para funcionar melhor se você gostar do if (largura == '65%'). Se você tivesse usado a resposta de Adams diretamente, isso não funcionou (eu tenho algo como 64.93288590604027). :)

Com base na solução excelente e surpreendente da timofey, aqui está uma implementação Javascript pura:

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

Espero que seja útil para alguém.

Eu tenho um problema semelhante em Obter valores de folha de estilo global em jQuery , eventualmente eu vim com a mesma solução acima .

Só queria cruzar as duas perguntas para que outras pessoas possam se beneficiar de descobertas posteriores.

Você pode colocar estilos que precisa acessar com jQuery em:

1. o cabeçalho do documento diretamente
2. em um include, qual script do lado do servidor então coloca na cabeça

Então, deve ser possível (embora não necessariamente fácil) escrever uma função js para analisar tudo dentro das tags de estilo no cabeçalho do documento e retornar o valor de que você precisa.

Você pode usar a função css (largura) para retornar a largura atual do elemento.

ie.

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

Veja também: http://api.jquery.com/width/ http://api.jquery.com/css/

Não há nada em jQuery e nada simples mesmo em javascript. Pegando a resposta de timofey e executando com ela, criei esta função que funciona para obter todas as propriedades que você deseja:

// 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
}

Converter de pixels em porcentagem usando multiplicação cruzada .

Configuração da fórmula:

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

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

O código real:

<script>

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

</script>