jQuery로 CSS 속성의 숫자 부분을 얻는 방법?

CSS 속성을 기반으로 숫자 계산을 수행해야합니다. 그러나 이것을 사용하여 정보를 얻을 때 :

$(this).css('marginBottom')

'10px'값을 반환합니다. 단지 값의 숫자 부분을 얻기에 트릭은인지 여부에 상관없이이 없습니다 px또는 %또는 em또는 무엇 이건?

이것은 문자열에서 숫자가 아닌, 점이 아닌, 빼기 부호를 모두 정리합니다.

$(this).css('marginBottom').replace(/[^-\d\.]/g, '');

음수 값으로 업데이트

parseInt($(this).css('marginBottom'), 10);

parseInt 단위를 자동으로 무시합니다.

예를 들면 다음과 같습니다.

var marginBottom = "10px";
marginBottom = parseInt(marginBottom, 10);
alert(marginBottom); // alerts: 10

replace 메소드를 사용하면 CSS 값은 숫자가 아닌 문자열입니다.

이 방법은 더 깨끗하고 단순하며 숫자를 반환합니다.

parseFloat($(this).css('marginBottom'));

parseFloat($(this).css('marginBottom'))

marginBottom이 em에 정의되어 있어도 위의 parseFloat 내부의 값은 계산 된 CSS 속성이므로 px로 표시됩니다.

$(this).css('marginBottom').replace('px','')

간단한 jQuery 플러그인을 사용하여 단일 CSS 속성의 숫자 값을 반환합니다.

parseFloatjQuery의 기본 css메소드가 반환 한 값에 적용됩니다 .

플러그인 정의 :

$.fn.cssNum = function(){
  return parseFloat($.fn.css.apply(this,arguments));
}

용법:

var element = $('.selector-class');
var numericWidth = element.cssNum('width') * 10 + 'px';
element.css('width', numericWidth);

margin-bottom 속성이 20px / 20 % / 20em으로 설정되어 있다고 가정 해 봅시다. 값을 숫자로 얻으려면 두 가지 옵션이 있습니다.

옵션 1:

parseInt($('#some_DOM_element_ID').css('margin-bottom'), 10);

parseInt () 함수는 문자열을 구문 분석하고 정수를 반환합니다. 수행중인 작업을 모르는 경우 위 기능에서 찾은 10 ( "기수")을 변경하지 마십시오.

예제 출력 은 %에 대해 20 (여백 아래에 px로 설정된 경우)이며 em은 현재 상위 요소 / 글꼴 크기를 기준으로 상대 숫자를 출력합니다.

옵션 2 (개인적으로이 옵션을 선호합니다)

parseFloat($('#some_DOM_element_ID').css('margin-bottom'));

예제 출력 은 %에 대해 20 (여백 아래에 px로 설정된 경우)이며 em은 현재 상위 요소 / 글꼴 크기를 기준으로 상대 숫자를 출력합니다.

parseFloat () 함수는 문자열을 구문 분석하고 부동 소수점 숫자를 리턴합니다.

parseFloat () 함수는 지정된 문자열의 첫 문자가 숫자인지 판별합니다. 그렇다면 숫자 끝에 도달 할 때까지 문자열을 구문 분석하고 숫자를 문자열이 아닌 숫자로 반환합니다.

옵션 2의 장점은 10 진수를 반환하면 (예 : 20.32322px) 소수점 뒤에 값을 반환합니다. 예를 들어 margin-bottom이 em 또는 %로 설정된 경우와 같이 특정 숫자를 반환해야하는 경우 유용합니다.

parseint소수점 이하 자릿수를 자릅니다 (예 : 1.5emgives 1).

replace정규식 으로 함수를 사용해보십시오.

$this.css('marginBottom').replace(/([\d.]+)(px|pt|em|%)/,'$1');

Id :

Math.abs(parseFloat($(this).css("property")));

단위없이 요소 너비를 얻는 가장 간단한 방법은 다음과 같습니다.

target.width()

출처 : https://api.jquery.com/width/#width2

이 매우 간단한 jQuery 플러그인을 구현할 수 있습니다 .

플러그인 정의 :

(function($) {
   $.fn.cssValue = function(p) {
      var result;
      return isNaN(result = parseFloat(this.css(p))) ? 0 : result;
   };
})(jQuery);

NaN이전 IE 버전에서 발생할 수있는 값에 저항력 이 있습니다 (0 대신 됩니다)

용법:

$(this).cssValue('marginBottom');

즐겨! :)

허용 된 답변을 개선하려면 다음을 사용하십시오.

Number($(this).css('marginBottom').replace(/[^-\d\.]/g, ''));

"px"전용 인 경우 다음을 사용할 수도 있습니다.

$(this).css('marginBottom').slice(0, -2);

소수점을 유지하면서 단위를 제거해야합니다.

var regExp = new RegExp("[a-z][A-Z]","g");
parseFloat($(this).css("property").replace(regExp, ""));

사용하다

$(this).cssUnit('marginBottom');

배열을 반환합니다. 첫 번째 인덱스는 마진 맨 아래 값 ( 20px 의 경우 예 20) 을 반환하고 두 번째 인덱스는 마진 맨 아래 단위 ( 20px의 예 px) 를 반환