Diciamo che la regola è la seguente:

.largeField {
    width: 65%;
}

C'è un modo per recuperare in qualche modo il '65% 'e non il valore del pixel?

Grazie.

EDIT: Sfortunatamente l'utilizzo dei metodi DOM non è affidabile nel mio caso, poiché ho un foglio di stile che importa altri fogli di stile, e di conseguenza il parametro cssRules finisce con un valore nullo o undefined .

Questo approccio, tuttavia, funzionerebbe nei casi più semplici (un foglio di stile, più dichiarazioni separate del foglio di stile all'interno del tag head del documento).

Non esiste un modo integrato, temo. Puoi fare qualcosa del genere:

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

Il modo più semplice

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

// >>> "65%"

Questo è decisamente possibile!

Devi prima nascondere () l'elemento genitore. Ciò impedirà a JavaScript di calcolare i pixel per l'elemento figlio.

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

Guarda il mio esempio .

Ora ... mi chiedo se sono il primo a scoprire questo trucco :)

Aggiornare:

One-liner

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

Lascerà un elemento nascosto prima del </body>tag, cosa che potresti desiderare .remove().

Guarda un esempio di one-liner .

Sono aperto a idee migliori!

Puoi accedere document.styleSheetsall'oggetto:

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

In ritardo, ma per gli utenti più recenti, prova questo se lo stile CSS contiene una percentuale :

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

Un plugin jQuery basato sulla risposta di 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());​​​​​

Restituirà '65% '. Restituisce solo numeri arrotondati per funzionare meglio se ti piace if (width == '65%'). Se avessi usato la risposta di Adams direttamente, non avrebbe funzionato (ho ottenuto qualcosa come 64.93288590604027). :)

Basandosi sull'eccellente e sorprendente soluzione di timofey, ecco una pura implementazione 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;
}

Spero sia utile a qualcuno.

Ho un problema simile in Ottenere i valori del foglio di stile globale in jQuery , alla fine ho trovato la stessa soluzione di cui sopra .

Volevo solo collegare le due domande in modo che altre possano trarre vantaggio dai risultati successivi.

Puoi inserire gli stili a cui devi accedere con jQuery in:

1. il capo del documento direttamente
2. in un include, quale script lato server poi mette in testa

Quindi dovrebbe essere possibile (anche se non necessariamente facile) scrivere una funzione js per analizzare tutto all'interno dei tag di stile nell'intestazione del documento e restituire il valore necessario.

È possibile utilizzare la funzione css (larghezza) per restituire la larghezza corrente dell'elemento.

cioè.

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

Vedi anche: http://api.jquery.com/width/ http://api.jquery.com/css/

Non c'è niente in jQuery e niente di semplice anche in javascript. Prendendo la risposta di timofey e correndo con essa, ho creato questa funzione che funziona per ottenere tutte le proprietà che desideri:

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

Converti da pixel a percentuale utilizzando la moltiplicazione incrociata .

Configurazione della formula:

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

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

Il codice effettivo:

<script>

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

</script>