multiple - obtener el valor porcentual de la regla de CSS en jQuery

jquery css width

Question

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 .

Sin embargo, este enfoque funcionaría en la mayoría de los casos sencillos (una hoja de estilo, múltiples declaraciones de hoja de estilo separadas dentro de la etiqueta de encabezado del documento).

Answer 1

¡Esto es definitivamente posible!

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

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

Ver mi example .

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'');

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

Vea un ejemplo de one-liner .

¡Estoy abierto a mejores ideas!

Answer 2

Estoy reescribiendo el comentario de user1491819 como una respuesta y agregando un poco de mejora (no puedo comentar debido a la baja reputación).

user1491819 creó esta función muy útil:

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

Pero esta función devuelve el número de píxeles o porcentaje sin unidades, por lo que debe adivinar cuál es. Para no adivinar, puede usar css (''ancho'') y también devolverá la unidad. Entonces la función para obtener el valor con unidades debería ser:

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

Answer 3

La manera más fácil

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

// >>> "65%"

Answer 4

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

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

Answer 5

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 cualquier propiedad 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
}

Answer 6

Puede acceder al objeto document.styleSheets :

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

Answer 7

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

1. el jefe del documento directamente
2. en una inclusión, qué secuencia de comandos del lado del servidor luego pone en la cabeza

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.

Answer 8

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

es decir.

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

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

Answer 9

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 útil para alguien.

Answer 10

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

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

Answer 11

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

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

Answer 12

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

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

Answer 13

Convierta de píxeles a porcentaje usando 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>