¿Es posible usar jQuery para obtener el ancho de un elemento en porcentaje o píxeles, según lo que el desarrollador especificó con CSS?

Estoy escribiendo un complemento 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, por ejemplo, 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?

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

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

¡Definitivamente es 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 ejemplo .

Creo que puedes usar directamente el acceso a objetos de la hoja de estilo (‘estilo’). Incluso entonces, YMMV por navegador. por ejemplo, elm.style.width .

Edite para el comentario de Peter :: No estoy buscando ‘obtener un%’. Según la pregunta:

Necesito poder determinar el ancho de un elemento que el usuario especifica … [¿Hay alguna forma de] mostrar el ancho de un elemento en px o%, dependiendo de lo que el desarrollador le haya dado con CSS?

Por lo tanto, proporcioné una alternativa para recuperar el valor 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, no busca ‘obtener un%’ .

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

¿Cómo se leen los valores de las reglas CSS con JavaScript?

Lo único que debe saber es en qué hoja de estilos está la clase o el ciclo 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 

Para mis propósitos extrapolé 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')); 

Si está buscando reasignar el porcentaje de elementos originales a un nuevo porcentaje, es una buena práctica definir ese valor en CSS y modificar el identificador de elementos de alguna manera (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%; } 

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

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

solo para hacerlo más jquery

Agrega esto

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

y luego usa

 $(selector).percWidth() 

esto devolverá el valor porcentual sin el signo%, por lo que puede usarlo en los cálculos

Si se establece usando la etiqueta de estilo, simplemente puede usar .prop ()
por ejemplo $ (‘. selector’). prop (‘estilo’). width.replace (‘%’, ”)

Recientemente, también conocí este problema, y ​​realmente no quería hacer el trabajo “extra”, que era obtener el ancho del elemento principal y calcular el porcentaje.

Después de algunos bashs 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); }); 

Entonces, creo que esta es la forma más cercana de usar jQuery para obtener el valor del ancho de un elemento en función de lo que el desarrollador especificó en el CSS.

Como puede ver, tengo una tabla y necesito recuperar los anchos para 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 DSV está en Style y Style 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 de jQuery de conseguirlo, pero es lo suficientemente simple y funciona para mí.

Espero que ayude.

Aclamaciones,