문자열이 아닌 숫자로 CSS 최고 값을 얻으시겠습니까?

문자열이 아닌 숫자로 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.
어떻게 이것을 달성 할 수 있습니까?

---

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/에서 바이올린 테스트

참고 URL : https://stackoverflow.com/questions/395163/get-css-top-value-as-number-not-as-string