回答:
これにより、すべての非数字、非ドット、および非マイナス記号が文字列からクリーンアップされます。
$(this).css('marginBottom').replace(/[^-\d\.]/g, '');
負の値の場合は更新
/[^-\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'));
%
、em
)
parseFloat($(this).css('marginBottom'))
emでmarginBottomが定義されている場合でも、上のparseFloat内の値は、計算されたCSSプロパティであるため、pxになります。
$(this).css('marginBottom').replace('px','')
px
が与えられたem
場合は変換する必要があります。
単純な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);
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または%に設定されている場合など、特定の数値を返す必要がある場合に役立ちます。
Id go for:
Math.abs(parseFloat($(this).css("property")));
margin
はa が否定的または肯定的であることを知りたいと思います!
この非常に単純なjQueryプラグインを実装できます。
プラグイン定義:
(function($) {
$.fn.cssValue = function(p) {
var result;
return isNaN(result = parseFloat(this.css(p))) ? 0 : result;
};
})(jQuery);
NaN
古いIEバージョンで発生する可能性がある値に耐性があります(0
代わりに戻ります)
使用法:
$(this).cssValue('marginBottom');
楽しい!:)
var result; return isNaN(result = parseFloat(this.css(p))) ? 0 : result;
使用する
$(this).cssUnit('marginBottom');
配列を返します。最初のインデックスはマージンの下部の値(20pxの例20)を返し、2番目のインデックスはマージンの下部の単位(20pxの例px)を返します