obter o valor percentual da regra CSS em jQuery

Digamos que a regra seja a seguinte:

.largeField { width: 65%; } 

Existe uma maneira de recuperar ‘65% ‘de alguma forma, e não o valor do pixel?

Obrigado.

EDIT: infelizmente, usando methods DOM não é confiável no meu caso, como eu tenho uma folha de estilo que importa outras folhas de estilo e como resultado, o parâmetro cssRules acaba com valor nulo ou indefinido .

Essa abordagem, no entanto, funcionaria nos casos mais diretos (uma folha de estilos, várias declarações de folha de estilo separadas dentro da tag head do documento).

Não há uma forma embutida, receio. Você pode fazer algo assim:

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

Mais fácil caminho

 $('.largeField')[0].style.width // >>> "65%" 

Isto é definitivamente mais 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 eu sou o primeiro a descobrir esse truque 🙂

Atualizar:

Um-liner

 element.clone().appendTo('body').wrap('
').css('width');

Ele deixará um elemento oculto antes da tag , que você pode querer .remove() .

Veja um exemplo de one-liner .

Estou aberto a melhores ideias!

Você pode acessar o object document.styleSheets :

   

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

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

Um plugin do jQuery baseado na resposta do 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());​​​​​ 

Vai retornar ‘65% ‘. Apenas retorna números arredondados para funcionar melhor se você quiser if (width == ‘65%’). Se você tivesse usado diretamente a resposta do Adams, isso não funcionou (eu consegui algo como 64.93288590604027). 🙂

Com base na excelente e surpreendente solução da timofey, aqui está uma implementação de 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; } 

Espero que seja útil para alguém.

Eu tenho um problema semelhante em Obtendo valores da folha de estilo global em jQuery , eventualmente, surgiu a mesma solução acima .

Só queria fazer uma binding cruzada das duas perguntas para que outras pessoas possam se beneficiar de descobertas posteriores.

Você pode colocar estilos que você precisa acessar com o jQuery:

  1. o chefe do documento diretamente
  2. em uma inclusão, qual script do lado do servidor, em seguida, coloca na cabeça

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

Você pode usar a function 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/

Estou reescrevendo user1491819 comentário como uma resposta e adicionando um pouco de melhoria (não posso comentar por causa da baixa reputação).

user1491819 criou esta function muito útil:

 function getCssWidth(childSelector) { return jQuery(childSelector).parent().clone().hide().find(childSelector).width(); } 

Mas esta function retorna o número de pixels ou porcentagem sem unidades, então você precisa adivinhar qual é. Para não adivinhar você pode usar css (‘width’) e ele retornará a unidade também. Portanto, a function para obter o valor com unidades deve ser:

 function getCssWidth(childSelector) { return jQuery(childSelector).parent().clone().hide().find(childSelector).css('width'); } 

Não há nada no jQuery e nada simples, mesmo em javascript. Tomando a resposta do timofey e rodando com ele, criei essa function que funciona para obter qualquer propriedade que você queira:

 // 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 de 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 atual: