Digamos que la regla es la siguiente:

.largeField {
    width: 65%;
}

¿Hay alguna manera de recuperar el '65% 'de alguna manera, y no el valor de píxel?

Gracias.

EDITAR: Desafortunadamente, el uso de métodos DOM no es confiable en mi caso, ya que tengo una hoja de estilo que importa otras hojas de estilo y, como resultado, el parámetro cssRules termina con un valor nulo o indefinido .

Este enfoque, sin embargo, podría funcionar en la mayoría de los casos sencillos (una hoja de estilo, múltiples declaraciones de estilos separada dentro de la cabeza de la etiqueta del documento).

No hay forma incorporada, me temo. Puedes hacer algo como esto:

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

La forma más fácil

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

// >>> "65%"

¡Esto es definitivamente posible!

Primero debe ocultar () el elemento padre. Esto evitará que JavaScript calcule píxeles para el elemento secundario.

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

Mira mi ejemplo .

Ahora ... me pregunto si soy el primero en descubrir este truco :)

Actualizar:

Un trazador de líneas

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

Dejará un elemento oculto antes de la </body>etiqueta, que es posible que desee .remove().

Vea un ejemplo de una sola línea .

¡Estoy abierto a mejores ideas!

Podrías acceder al 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>

Tarde, pero para los usuarios más nuevos, intente esto si el estilo CSS contiene un porcentaje :

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

Un complemento de jQuery basado en la respuesta 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());​​​​​

Devolverá '65% '. Solo devuelve números redondeados para que funcione mejor si te gusta if (ancho == '65%'). Si hubiera usado la respuesta de Adams directamente, eso no había funcionado (obtuve algo como 64.93288590604027). :)

Sobre la base de la excelente y sorprendente solución de timofey, aquí hay una implementación pura 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 sea de ayuda para alguien.

Tengo un problema similar al obtener valores de la hoja de estilo global en jQuery , finalmente se me ocurrió la misma solución que la anterior .

Solo quería vincular las dos preguntas para que otros puedan beneficiarse de los hallazgos posteriores.

Puede poner los estilos a los que necesita acceder con jQuery en:

1. el encabezado del documento directamente
2. en una inclusión, qué script del lado del servidor coloca en el encabezado

Entonces debería ser posible (aunque no necesariamente fácil) escribir una función js para analizar todo dentro de las etiquetas de estilo en el encabezado del documento y devolver el valor que necesita.

Puede usar la función css (ancho) para devolver el ancho actual del elemento.

es decir.

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

Véase también: http://api.jquery.com/width/ http://api.jquery.com/css/

No hay nada en jQuery y nada sencillo incluso en javascript. Tomando la respuesta de timofey y ejecutándola, creé esta función que funciona para obtener las propiedades que desee:

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

Convierta de píxeles a porcentaje mediante la multiplicación cruzada .

Configuración 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

El código real:

<script>

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

</script>