CSS 상단 값을 문자열이 아닌 숫자로 가져 오나요?

jQuery에서 부모에 대한 상위 위치를 숫자로 얻을 수 있지만 .NET에 설정된 경우 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.
어떻게 이것을 달성 할 수 있습니까?

parseInt () 함수를 사용하여 문자열을 숫자로 변환 할 수 있습니다. 예 :

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

업데이트 : (Ben이 제안한대로) : 기수도 제공해야합니다.

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

10 진수로 구문 분석하도록합니다. 그렇지 않으면 '0'으로 시작하는 문자열이 8 진수로 구문 분석 될 수 있습니다 (사용되는 브라우저에 따라 다름).

M4N의 답변을 기반으로 한 jQuery 플러그인

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

그런 다음이 방법을 사용하여 숫자 값을 얻습니다.

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

Ivan Castellanos의 답변 (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/에서 바이올린 테스트