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

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

CSS 속성을 바탕으로 수치 계산을 해야 합니다.그러나 이를 사용하여 정보를 가져올 경우:

$(this).css('marginBottom')

값 '10''을 반환합니다.자는지에이이까을?이rrtoesftoekat자이s을는에이>px아니면%아니면em아니면 뭐요?

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

parseInt 유닛을 자동으로 무시합니다.

예를 들어,

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

이렇게 하면 문자열에서 숫자가 아닌 모든 부호, 점이 아닌 부호가 지워집니다.

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

음수 값에 대해 업데이트됨

교체 방법을 사용하면 CSS 값은 숫자가 아닌 문자열입니다.

이 메서드는 보다 깨끗하고 간단하며 숫자를 반환합니다.

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

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

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

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

20px/20%/20em으로 설정된 마진 하한 속성을 가정해 보겠습니다.숫자로 값을 구하려면 다음 두 가지 옵션이 있습니다.

옵션 1:

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

parseInt() 함수는 문자열을 구문 분석하고 정수를 반환합니다.당신이 무엇을 하고 있는지 알지 못하는 한 위의 함수에서 발견된 10을 변경하지 마십시오("레이딕스"라고 함).

출력 예제는 %에 대해 20(px에서 마진-하단으로 설정된 경우)이고 현재 부모 요소/글꼴 크기를 기준으로 상대적인 숫자를 출력합니다.

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

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

출력 예제는 %에 대해 20(px에서 마진-하단으로 설정된 경우)이고 현재 부모 요소/글꼴 크기를 기준으로 상대적인 숫자를 출력합니다.

parseFloat() 함수는 문자열을 구문 분석하고 부동 소수점 번호를 반환합니다.

parseFloat() 함수는 지정된 문자열의 첫 번째 문자가 숫자인지 여부를 결정합니다.이 경우 숫자의 끝에 도달할 때까지 문자열을 파싱하고 문자열이 아닌 숫자로 숫자를 반환합니다.

옵션 2의 장점은 10진수를 반환받으면(예: 20.32322px) 소수점 뒤의 값으로 반환되는 숫자를 얻을 수 있다는 것입니다.마진 하단이 em 또는 %로 설정된 경우와 같이 특정 번호를 반환해야 할 경우 유용합니다.

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

를 적용합니다.parseFloat jQuery에 의해 로의로된로oecss방법.

플러그인 정의:

$.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);

parseint는 모든 십진수 값을 잘라냅니다(예:1.5em주는1).

해보세요.replace예를 들어 정규 기능을 수행합니다.

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

나는 다음을 지지합니다.

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의 경우 20px), 두 번째 인덱스는 마진 바닥의 단위를 반환합니다.

언급URL : https://stackoverflow.com/questions/1100503/how-to-get-just-numeric-part-of-css-property-with-jquery