문자열이 아닌 숫자로 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'));

업데이트: (벤이 제안한 대로):레딕스도 줘야 합니다.

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

강제로 십진수로 구문 분석합니다. 그렇지 않으면 '0'으로 시작하는 문자열이 팔진수로 구문 분석될 수 있습니다(사용하는 브라우저에 따라 다를 수 있습니다).

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

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

그러면 이 방법을 사용해서 숫자 값을 얻을 수 있습니다.

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

이반 카스텔라노스의 답변(M4N의 답변을 기반으로 함)을 기반으로 한 좀 더 실용적인/효율적인 플러그인.사용.|| 0테스트 단계 없이 Nan을 0으로 변환합니다.

또한 용도에 맞게 플로트 및 인테인트 변형을 제공했습니다.

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/ 에서 테스트 fiddle을 수행합니다.

저는 안되고, String으로 Top을 받고 Pixel을 제거했습니다.

let item = document.querySelector('.myclass');

let IngTop = parseInt(getComputedStyle(item).top.replace('px',''));

.myclass{
top : 150px
}

<div class='myclass'></div>

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