¿Obtener el valor superior de CSS como número, no como cadena?

123

En jQuery puede obtener la posición superior relativa al padre como un número, pero no puede obtener el valor superior de css como un número si se estableció px.
Digamos 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 superior css como número 10.
¿Cómo se lograría esto?

Pim Jager
fuente

Respuestas:

213

Puede usar la función parseInt () para convertir la cadena en un número, por ejemplo:

parseInt($('#elem').css('top'));

Actualización: (según lo sugerido por Ben): También debe dar la raíz:

parseInt($('#elem').css('top'), 10);

Obliga a analizarlo como un número decimal; de lo contrario, las cadenas que comienzan con '0' pueden analizarse como un número octal (puede depender del navegador utilizado).

M4N
fuente
57
También debe dar la raíz: parseInt ($ ('# elem'). Css ('top'), 10); Obliga a analizarse como base 10; de lo contrario, las cadenas que comienzan con '0' se analizarán en la base 8.
Ben
3
Sin embargo, podría ser un flotador, por lo que es mejor usar parseFloat.
Vsevolod Golovanov
25

Un complemento 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 usa este método para obtener valores numéricos

$("#logo").cssNumber("top")
Ivan Castellanos
fuente
13

Un complemento un poco más práctico / eficiente basado en la respuesta de Ivan Castellanos (que se basó en la respuesta de M4N). El uso || 0convertirá Nan a 0 sin el paso de prueba.

También proporcioné variaciones 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

Pruebe el violín en http://jsfiddle.net/TrueBlueAussie/E5LTu/

Codificación ido
fuente
Parece que uno debería usar siempre el cssFloat o considerar que cssInt eliminará un valor como 25.9999999px a 25.
justingordon
1
@justingordon: Ese es el comportamiento correcto de truncamiento de enteros para un int, por lo que realmente se reduce al uso requerido del valor.
Gone Coding