¿Es posible usar jQuery para obtener el ancho de un elemento en porcentajes o píxeles, según lo especificado por el desarrollador con CSS?

Question

Estoy escribiendo un plugin de jQuery y algo que debo poder hacer es determinar el ancho de un elemento que el usuario especifique. El problema es que .width() o .css ('ancho') siempre informará los píxeles exactos, incluso si el desarrollador lo ha asignado, p. ancho: 90% con CSS.

¿Hay alguna forma de que jQuery muestre el ancho de un elemento en px o% dependiendo de lo que el desarrollador le haya dado con CSS?

Answer 1

Yo diría que la mejor manera es calcular usted mismo:

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

Answer 2

Creo que se puede utilizar hojas de estilo ('estilo') el acceso a objetos directamente. Incluso entonces, YMMV por navegador. p.ej. elm.style.width.

Editar para el comentario de Peter :: No estoy buscando 'obtener un%'. De acuerdo con la pregunta: ¿

tengo que ser capaz de hacer es determinar el ancho de un elemento especificado por el usuario ... [¿hay una manera de] salida de la anchura de un elemento en píxeles o % dependiendo de lo que el desarrollador le haya dado con CSS?

Así que proporcionan una alternativa para recuperar el valor de CSS "en bruto". Esto parece funcionar en FF3.6. YMMV en otro lugar (la respuesta de los netadictos puede ser más portátil/universal, no lo sé). Nuevamente, es que no busca 'obtener un%'.

Answer 3

La manera de hacerlo está documentada en esta pregunta de stackoverflow.

How do you read CSS rule values with JavaScript?

La única cosa que tienes que saber es en que hoja de estilo es la clase o bucle a través de todas las hojas de estilo. La siguiente función le brinda todas las características de la clase, sería fácil hacer una expresión regular para extraer la característica que busca.

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

     if(classes[x].selectorText==className) { 
       (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText); 
     } 
    } 
} 
getStyle('.test'); 

Answer 4

Para mis propósitos he extrapolado la respuesta de MДΓΓ БДLL.

Tenga en cuenta que solo estoy trabajando con porcentajes enteros.

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

Answer 5

Si usted está buscando para volver a asignar el porcentaje de elementos original a un nuevo porcentaje, es una buena práctica para definir ese valor en CSS y modificar el identificador de elementos de alguna manera (de clase, identificación, etc.) para reflejar la nueva definición de CSS. Esto no siempre se aplica si la nueva variable porcentual necesita ser variable.

.myClass{ 
    width:50%; 
} 

.myNewClass{ 
    width:35%; 
} 

Adición de una eliminación a través de este (u otro) Método:

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

Answer 6

Es lo más 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.

Answer 7

sólo para que sea más jqueryish

añadir esta

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

y luego utilice

$(selector).percWidth() 

este devolverá el valor por ciento sin el signo%, por lo que se puede utilizar en cálculos

Answer 8

que se reunieron recientemente este problema también, y realmente no querían para hacer el trabajo "extra" que estaba obteniendo el ancho del padre y calculando el porcentaje.

Después de algunos intentos rápidos, esto es lo que tengo:

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

Por lo tanto, creo que esta es la forma más cercana a usar jQuery para obtener el valor del ancho de un elemento basado en lo que el desarrollador especificado en el css.

Como se puede ver, tengo una mesa y que necesito para recuperar el ancho de cada una de las columnas.

No podemos obtener el valor especificado por el desarrollador (DSV) directamente con el método jQuery, pero después de combinarlo con el método incorporado de JavaScript, está a solo un paso de obtener el DSV.

Como el DSV está en el Estilo y el Estilo es una propiedad de un elemento, entonces podemos usar el método jQuery: prop() para obtenerlo. Este método devuelve el objeto de estilo (por ejemplo, sty) para que podamos llamar a sty.width para obtener el DSV directamente.

Esta no es la forma pura jQuery para conseguirlo, pero es lo suficientemente simple y funciona para mí.

Espero que ayude.

Saludos,

Answer 9

Si Su conjunto usando etiqueta de estilo, sólo tiene que utilizar .prop (por ejemplo)
$ ('Selector ') prop (' estilo ') width.replace (' %', '')