É possível usar o jQuery para obter a largura de um elemento em porcentagem ou pixels, com base no que o desenvolvedor especificou com CSS?

Eu estou escrevendo um plugin jQuery e algo que eu preciso fazer é determinar a largura de um elemento que o usuário especifica. O problema é que .width () ou .css (‘width’) sempre reportarão pixels exatos, mesmo que o desenvolvedor os tenha atribuído, por exemplo: width: 90% com CSS.

Existe alguma maneira de ter saída do jQuery a largura de um elemento em px ou%, dependendo do que o desenvolvedor deu com CSS?

    Eu diria que a melhor maneira é calcular você mesmo:

    var width = $('#someElt').width(); var parentWidth = $('#someElt').offsetParent().width(); var percent = 100*width/parentWidth; 

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

    Eu acho que você pode usar o access ao object stylesheet (‘style’) diretamente. Mesmo assim, YMMV pelo navegador. por exemplo, elm.style.width .

    Edite para o comentário de Peter :: Eu não estou olhando para ‘obter um%’. Conforme a pergunta:

    Eu preciso ser capaz de fazer é determinar a largura de um elemento que o usuário especifica … [existe uma maneira] de produzir a largura de um elemento em px ou%, dependendo do que o desenvolvedor deu com CSS?

    Assim, eu forneci uma alternativa para recuperar o valor CSS “bruto”. Isto parece funcionar em FF3.6. YMMV em outros lugares (resposta do netadictos pode ser mais portátil / universal, eu não sei). Mais uma vez, não está procurando “obter um%” .

    A maneira de fazer isso é documentada nessa questão do stackoverflow.

    Como você lê valores de regras CSS com JavaScript?

    A única coisa que você precisa saber é em qual folha de estilo é a class ou o loop através de todas as folhas de estilo. A seguinte function fornece todos os resources da class, seria fácil fazer um regex para extrair o recurso que você procura.

     function getStyle(className) { var classs = document.styleSheets[0].rules || document.styleSheets[0].cssRules for(var x=0;x 

    Para meus propósitos, extrapolei a resposta de M ΓΓДLL.

    Tenha em mente que estou trabalhando apenas com porcentagens inteiras.

      var getPercent = function(elem){ var elemName = elem.attr("id"); var width = elem.width(); var parentWidth = elem.offsetParent().width(); var percent = Math.round(100*width/parentWidth); console.log(elemName+"'s width = "+percent+"%"); } getPercent($('#folders')); getPercent($('#media')); getPercent($('#player')); 

    Se você deseja reatribuir a porcentagem de elementos originais a uma nova porcentagem, é uma boa prática definir esse valor em CSS e modificar o identificador de elementos de alguma forma (class, id, etc) para refletir a nova definição de CSS. Isso nem sempre se aplica se a nova variável de porcentagem precisar ser variável.

     .myClass{ width:50%; } .myNewClass{ width:35%; } 

    Adicionando uma remoção através deste (ou outro) método:

     $('.myClass').removeClass('myClass').addClass('myNewClass'); 

    apenas para torná-lo mais jqueryish

    Adicione isso

     $.fn.percWidth = function(){ return this.outerWidth() / this.parent().outerWidth() * 100; } 

    e depois usar

     $(selector).percWidth() 

    isso retornará o valor percentual sem o sinal%, para que você possa usá-lo nos cálculos

    Se é definido usando tag de estilo, você pode simplesmente usar .prop ()
    eg $ (‘. selector’). prop (‘style’). width.replace (‘%’, ”)

    Eu recentemente encontrei este problema também, e eu realmente não queria fazer o trabalho “extra” que estava obtendo a largura do pai e calculando a porcentagem.

    Depois de algumas tentativas rápidas, é isso que tenho:

      $($($(table).find('tr')[0]).find('td')).each(function (i, e) { var proptW = $(e).prop("style").width; console.log(proptW); }); 

    Então, eu acho que esta é a maneira mais próxima de usar o jQuery para obter o valor da largura de um elemento com base no que o desenvolvedor especificou no css.

    Como você pode ver, eu tenho uma tabela e preciso recuperar as larguras para cada coluna.

    Não podemos obter o valor especificado pelo desenvolvedor (DSV) diretamente com o método jQuery, mas depois de combinado com o método integrado JavaScript, é apenas um passo de obter o DSV.

    Como o DSV está no Style e Style é uma propriedade de um elemento, então podemos usar o método jQuery: prop () para obtê-lo. Esse método retorna o object de estilo (por exemplo, sty), para que possamos chamar sty.width para obter o DSV diretamente.

    Esta não é a forma pura de jQuery para obtê-lo, mas é bastante simples e funciona para mim.

    Espero que ajude.

    Felicidades,