Получите верхнее значение css как число не как строку?

В jQuery вы можете получить верхнюю позицию относительно родителя как числа, но вы не можете получить верхнее значение css как число, если оно было установлено в px.
Скажем, у меня есть следующее:

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

Но я хочу иметь свойство css top как число 10.
Как можно добиться этого?

ОТВЕТЫ

Ответ 1

Вы можете использовать функцию parseInt() для преобразования строки в число, например:

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

Обновление: (как было предложено Беном): вы также должны дать основание:

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

Заставляет его анализироваться как десятичное число, иначе строки, начинающиеся с '0', могут быть проанализированы как восьмеричное число (может зависеть от используемого браузера).

Ответ 2

Плагин jQuery на основе ответа M4N

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

Итак, вы просто используете этот метод для получения чисел

$("#logo").cssNumber("top")

Ответ 3

Несколько более практичный/эффективный плагин, основанный на ответе Ивана Кастелланоса (который был основан на ответе M4N). Использование || 0 преобразует Nan в 0 без шага тестирования.

Я также предоставил варианты float и int в соответствии с предполагаемым использованием:

jQuery.fn.cssInt = function (prop) {
    return parseInt(this.css(prop), 10) || 0;
};

jQuery.fn.cssFloat = function (prop) {
    return parseFloat(this.css(prop)) || 0;
};

Использование:

$('#elem').cssInt('top');    // e.g. returns 123 as an int
$('#elem').cssFloat('top');  // e.g. Returns 123.45 as a float

Тест скрипта на http://jsfiddle.net/TrueBlueAussie/E5LTu/