Obter css valor superior como número e não como string?

123

No jQuery, você pode obter a posição superior em relação ao pai como um número, mas não é possível obter o valor superior do css como um número se ele tiver sido definido px.
Digamos que tenho o seguinte:

#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'

Mas eu quero ter a propriedade css top como o número 10.
Como alguém conseguiria isso?

Pim Jager
fonte

Respostas:

213

Você pode usar a função parseInt () para converter a string em um número, por exemplo:

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

Atualização: (como sugerido por Ben): Você também deve fornecer o radix:

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

Força que ele seja analisado como um número decimal; caso contrário, as seqüências iniciadas com '0' podem ser analisadas como um número octal (pode depender do navegador usado).

M4N
fonte
57
Você também deve fornecer a raiz: parseInt ($ ('# elem'). Css ('top'), 10); Força que ele seja analisado como base 10, caso contrário, as seqüências iniciadas com '0' serão analisadas na base 8. #
272 Ben Ben
3
Pode ser um float, portanto, é melhor usar o parseFloat.
Vsevolod Golovanov 07/07
25

Um plugin jQuery baseado na resposta do M4N

jQuery.fn.cssNumber = function(prop){
    var v = parseInt(this.css(prop),10);
    return isNaN(v) ? 0 : v;
};

Então você apenas usa este método para obter valores numéricos

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

Um plugin um pouco mais prático / eficiente baseado na resposta de Ivan Castellanos (que foi baseado na resposta de M4N). O uso || 0converterá Nan em 0 sem a etapa de teste.

Também forneci variações float e int para se adequar ao uso pretendido:

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

Teste o violino em http://jsfiddle.net/TrueBlueAussie/E5LTu/

Gone Coding
fonte
Parece que sempre se deve usar o cssFloat ou considerar que cssInt reduzirá um valor como 25.9999999px para 25. #
justingordon 29/13/13
1
@justingordon: Esse é o comportamento correto de truncamento de número inteiro para um int, portanto, ele realmente se resume ao uso necessário do valor.
Gone Coding