jQueryでCSSプロパティの数値部分だけを取得する方法は?


157

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

$(this).css('marginBottom')

値「10px」を返します。ただ値の数の一部を取得するトリックはそれがあるかどうかに関係なく、存在しないpxか、%またはemまたは何?

回答:


163

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

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

負の値の場合は更新


4
これは、負の数を扱っていない場合に最適です。私は正規表現の第一人者ではないので、より良いサンプルを提供することはできません:)
gary

39
使用を検討してparseFloatは取り扱うすべての浮動小数点数に使用できる文字をしても返し文字列の代わりに-を参照してmaximelebretonの答えを
オリバー

6
これは、質問に正しく回答しないため、受け入れられた回答ではありません。parseFloat / parseIntソリューションの方が優れています。質問は、数値計算に関して尋ねます。この回答は文字列を返します。つまり、 "20" + 20 = "2020"は、関係者にとっては良くありません。
mastaBlasta 2013年

@zakovyryaは、使用されたRegExpを説明できますか/[^-\d\.]/g
アレクサンダー

1
キャレット付きの@Alexander角括弧は、NOT:[^ <ここに入力したもの>]を意味します。この正規表現では、マイナス記号、数字、ドット以外の記号に一致します。基本的に、番号の一部にできないすべてのものを削除します
zakovyrya '20

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

parseInt 単位は自動的に無視されます。

例えば:

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

1
これは、私が遭遇したすべての場合に非常にうまく機能するようであり、どの正規表現ソリューションよりもはるかに読みやすくなっています。
Markus Amalthea Magnuson

3
このソリューションを使用している場合は、基数(10)をparseIntに追加することができます。
asawilliams

47
maximelebretonの回答のように、整数以外の値を受け取った場合の代わりに、parseFloatを使用することもできますparseInt
オリバー

3
実際、parseIntは10がデフォルトであるため、 "、10"基数パラメーターを必要としません。パラメータが少ない=読みやすさ、コードが短い、バグが少ない。
Pointer Null

2
10は、数値を8進数として解釈できない場合のparseIntのデフォルトのみです(たとえば、 '0700'は700ではなく448として解析されます。これはおそらく望ましいことです)。
ロバートC.バース2014

122

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

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

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

2
OPは、(可能な非整数ユニットを求めているので、これは、最適なソリューションであり%em
アンドレFigueiredoの

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

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


3
parseFloatの引数は1つだけです-ここで指定した基数(10)は無視されます。したがって、より正確な答えはmaximelebretonのものになります。
Oliver

それはparseFloatは($(この)の.css( 'marginBottom')、10)である必要はない
user1736947

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

2
それは「px」の場合のみ処理します。したがって、残りの「サフィックス」ごとに個別の置換を行う必要があると思います。
Grzegorz Oledzki 2009

3
注意してください-他のサフィックスはピクセル単位ではないので、期待するpxが与えられたem場合は変換する必要があります。
アリエル

それは私が考えていたものです-これのためのライブラリルーチンはありますか?pxを期待するのはかなり合理的な条件だと思いますが、堅牢性のために、オプションは何ですか?(ちょうどここで黙って-私は値を制御するので私はそれをあまり気にしないでしょう)
lol

5

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

これはparseFloat、jQueryのデフォルト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

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

オプション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または%に設定されている場合など、特定の数値を返す必要がある場合に役立ちます。


4

parseint10進値を切り捨てます(例:1.5emを与える1)。

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

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

4

Id go for:

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

一般的なソリューションではありません。ほとんどの場合、私marginはa が否定的または肯定的であることを知りたいと思います!
Andre Figueiredo

3

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

target.width()

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


幅と高さに最適です。$(selector).width()と$(selector).height()は確かに数値です。他のcss小道具には役に立ちません:マージン、パディング。
EON

3

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

プラグイン定義:

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

NaN古いIEバージョンで発生する可能性がある値に耐性があります(0代わりに戻ります)

使用法:

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

楽しい!:)


1
これは良い考えですが、必要以上にコストが不明な関数を呼び出すなどの副作用に注意してください。 var result; return isNaN(result = parseFloat(this.css(p))) ? 0 : result;
ニコール

2

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

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

2

「px」だけの場合は、次のように使用することもできます。

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

0

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

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

-1

使用する

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

配列を返します。最初のインデックスはマージンの下部の値(20pxの例20)を返し、2番目のインデックスはマージンの下部の単位(20pxの例px)を返します


1
cssUnitは実際にはjQueryではなくjQueryUIの一部です。
cvkline 2015年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.