Convertir cadena de ancho css al número normal

Question

Al tratar de calcular el ancho de un elemento oculto encontré que jquery.width() devuelve 0 para el ancho de ese elemento.

Descubrí que usar jquery.css ('ancho') devolvería el ancho correcto utilizando el ancho de estilo declarado (incluso si ese valor es diferente de la hoja de estilo inicial). El problema es que el método css ('ancho') devuelve una cadena, generalmente en forma de "100px". Mi pregunta se resuelve en: ¿cómo recuperar el número de la cadena "100px"? ¿Hay alguna manera fácil?

Answer 1

Si siempre devuelve en formato px, "100px", "50px", etc (es decir, no "em" o porcentaje), usted podría ...

var width = parseInt($("#myelem").css("width"),10); // always use a radix 

o

var width = parseInt(element.style.width,10); // always use a radix 

Ignora el sufijo "px" por lo que deberías estar listo.

Aunque en el fondo estoy pensando que algo no está bien si $ ("# myelem"). Width() no funciona.

Nota sobre elementos ocultos.

Si está agregando jQuery para mejorar progresivamente su página, el elemento que está calculando debe estar visible cuando la página se carga por primera vez. Entonces debería obtener el ancho antes de ocultar inicialmente el elemento. Al hacer esto, $ ("# myelem"). Width() funcionará.

var myWidth = 0; 

$(document).ready(function() { 
    myWidth = $("#myelem").width(); 
    $("#myelem").hide(); 
}); 

Answer 2

Ah, se me ocurrió:
new Number($elem.css('width').slice(0, -2));
//to extract the 'px' and return a regular number

Ahora sólo espero que jQuery devuelve Allways la misma manera cadena: "100px"

Answer 3

que se pegaba a .width(), ya que en realidad recibe el ancho calculado en lugar de ancho css. En lugar de ocultarlo con .hide() (display: none), podría ocultarlo con .css('visible', 'hidden') y luego .width() debería funcionar.

de mi comentario Si no desea cambiar su de entonces se podría aplicar visible: hidden y posteriormente .show() y luego medir la altura .hide(). Después de haberlo medido, invierte eso. Los objetos aún afectan el diseño de la página cuando están ocultos por visible: hidden - ten cuidado con eso.

Para evitar las etiquetas que alteran el diseño, puede establecer la posición en absoluta, moverla a la etiqueta del cuerpo y luego medir.

Answer 4

Puede eliminar elementos no numéricos con una expresión regular y luego simplemente convertir a un número. Esto funciona independientemente de cómo defina el ancho (px, em, %, pt). Conserva puntos decimales también

vainilla Javascript

Number(elem.style.width.replace(/[^\d\.\-]/g, '')); 

jQuery

Number($elem.css('width').replace(/[^\d\.\-]/g, '')); 

Answer 5

En la llanura de JavaScript:

parseInt('100px', 10) 

Obras con "100em", "100%", e incluso con : "100". No es necesario ningún patrón de Expresión regular.