web-dev-qa-db-ja.com

jQueryでCSSプロパティの数値部分のみを取得するにはどうすればよいですか？

CSSプロパティに基づいて数値計算を行う必要があります。ただし、これを使用して情報を取得する場合：

$(this).css('marginBottom')

値「10px」を返します。 pxか%かemかどうかに関係なく、値の数値部分を取得するだけのトリックはありますか？

javascriptjquerycssparsing
151
Tim Sheiner

これにより、文字列からすべての非数字、非ドット、および非マイナス記号がクリーンアップされます。

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

負の値に対して更新

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

parseInt は、単位を自動的に無視します。

例えば：

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

Replaceメソッドでは、css値は文字列であり、数値ではありません。

このメソッドはよりクリーンでシンプルで、数値を返します：

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

MarginBottomがemで定義されている場合でも、上記のparseFloat内の値は、計算されたCSSプロパティであるため、pxになります。

13
Alex Pavlov
$(this).css('marginBottom').replace('px','')
9
Diodeus - James MacFarlane

20px/20％/ 20emに設定されたmargin-bottomプロパティがあるとします。値を数値として取得するには、2つのオプションがあります。

オプション1：

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

ParseInt（）関数は文字列を解析し、整数を返します。何をしているのかわからない限り、上記の関数（「基数」として知られる）にある10を変更しないでください。

出力例は、％およびemに対して20（pxでmargin-bottomが設定されている場合）になり、現在の親要素/フォントに基づいて相対数を出力しますサイズ。

オプション2（個人的にこのオプションを好む）

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

出力例は、％およびemに対して20（pxでmargin-bottomが設定されている場合）になり、現在の親要素/フォントに基づいて相対数を出力しますサイズ。

ParseFloat（）関数は文字列を解析し、浮動小数点数を返します。

ParseFloat（）関数は、指定されたストリングの最初の文字が数字かどうかを判別します。そうである場合、数値の末尾に到達するまで文字列を解析し、数値を文字列ではなく数値として返します。

オプション2の利点は、10進数（20.32322pxなど）が返された場合、小数点以下の値で返された数値が返されることです。マージン底がemまたは％に設定されている場合など、特定の数値を返す必要がある場合に役立ちます

5
Arman Nisch

単純なjQueryプラグインを使用して、単一のCSSプロパティの数値を返します。

JQueryのデフォルトのparseFloatメソッドによって返される値に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);
5
Quickredfox

Id go for：

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

parseintは、小数値を切り捨てます（例：1.5emは1を返します）。

正規表現でreplace関数を試してください。

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

単位なしで要素の幅を取得する最も簡単な方法は次のとおりです。

target.width()

ソース： https://api.jquery.com/width/#width2

3
Paul Leclercq

この非常に単純なjQueryプラグインを実装できます：

プラグイン定義：

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

古いIEバージョンで発生する可能性のあるNaN値に耐性があります（代わりに0を返します）

使用法：

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

楽しい！ :)

3
CodeGems

「px」専用の場合は、次も使用できます。

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

受け入れられた回答を改善するには、これを使用します：

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

小数を保持しながら単位を削除する必要があります。

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