javascript - ¿Obtener el valor CSS 'top' como número y no como cadena?
En jQuery puedes obtener la posición superior relativa al padre como un número, pero no puedes obtener el valor de top de css como un número si se estableció en px.
Supongamos que tengo lo siguiente:
#elem{
position:relative;
top:10px;
}
<div>
Bla text bla this takes op vertical space....
<div id='elem'>bla</div>
</div>
$('#elem').position().top; //Returns the number (10+(the vertical space took by the text))
$('#elem').css('top'); //Returns the string '10px'
Pero quiero tener la propiedad css top como el número 10.
¿Cómo se lograría esto?
Respuesta #1
Puedes usar la función parseInt() para convertir la cadena en un número, por ejemplo:
parseInt($('#elem').css('top'));
Actualización: (como sugirió Ben): También deberías dar la base:
parseInt($('#elem').css('top'), 10);
Obliga a que se analice como un número decimal, de lo contrario, las cadenas que comiencen con '0' podrían analizarse como un número octal (podría depender del navegador utilizado).
Respuesta #2
Un plugin de jQuery basado en la respuesta de M4N
jQuery.fn.cssNumber = function(prop){
var v = parseInt(this.css(prop),10);
return isNaN(v) ? 0 : v;
};
Entonces solo usas este método para obtener valores numéricos
$("#logo").cssNumber("top")
Respuesta #3
Un complemento ligeramente más práctico/eficiente basado en la respuesta de Ivan Castellanos (que a su vez se basó en la respuesta de M4N). Usar || 0 convertirá NaN en 0 sin el paso de prueba.
También he proporcionado variantes de float e int para adaptarse al uso previsto:
jQuery.fn.cssInt = function (prop) {
return parseInt(this.css(prop), 10) || 0;
};
jQuery.fn.cssFloat = function (prop) {
return parseFloat(this.css(prop)) || 0;
};
Uso :
$('#elem').cssInt('top'); // e.g. returns 123 as an int
$('#elem').cssFloat('top'); // e.g. Returns 123.45 as a float