如何用jQuery獲取CSS屬性的數值部分？

Question

我需要做一個基於CSS屬性的數值計算。但是，當我使用它來獲取信息時：

$(this).css('marginBottom') 

它返回值'10px'。有沒有一種方法可以獲得價值的數字部分，不管是px還是%或em或其他什麼？

Answer 1

這將清理所有非數字，非點，並從字符串未減號：

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

更新的負值

Answer 2

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

Answer 3

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

即使marginBottom使用em定義，parseFloat內的值上方，將會在PX，因爲它是一個計算的CSS屬性。

Answer 4

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

parseInt會自動忽略這些單位。

例如：

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

Answer 5

，同時保留小數應該刪除單位。

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

Answer 6

parseint將截斷任何十進制值（例如1.5em給出1）。

嘗試replace函數與正則表達式 例如，

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

Answer 7

我使用一個簡單的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); 

Answer 8

隨着替代方法，你的CSS值是一個字符串，而不是數字。

這種方法更清潔，簡單，並返回一個數字：

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

Answer 9

編號去：

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

Answer 10

最簡單的方法來獲取元素的寬度沒有單位：

target.width() 

來源：https://api.jquery.com/width/#width2

Answer 11

使用

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

其返回的數組。 第一個索引返回餘量底部的值（例如爲20像素） 和第二索引返回緣底部的單元（例如PX爲20像素）

Answer 12

您可以實現這種非常簡單的jQuery插件：

插件定義：

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

這是耐在舊版本IE中可能發生的（將返回0代替）個值

用法：

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

享受！ :)

Answer 13

讓我們假設您將margin-bottom屬性設置爲20px/20％/ 20em。要獲得的值作爲數有兩種選擇：

選項1：

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

的parseInt函數（）的函數把字符串，並返回一個整數。除非你知道你在做什麼，否則不要改變上述函數中的10（稱爲「基數」）。

示例輸出將爲20（如果頁邊距設置爲px）％和em，它會根據當前父元素/字體大小輸出相對數。

選項2（I個人傾向於此選項）

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

示例輸出將是：20（如果邊距以像素組）爲％和EM它將相對輸出基於當前父元素/字體大小的數字。

parseFloat（）函數解析一個字符串並返回一個浮點數。

parseFloat（）函數確定指定字符串中的第一個字符是否是數字。如果是，它會解析字符串直到達到數字的末尾，然後將該數字作爲數字返回，而不是字符串。

選項2的優點是，如果得到返回的十進制數（例如20.32322px），您將得到小數點後面返回的數字。有用的，如果你需要，如果你的下邊距在EM或％

Answer 14

設置爲改善公認的答案用具體的數字返回，例如這樣的：

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

Answer 15

如果它只是爲「PX」你也可以使用：

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