Làm thế nào để chỉ lấy một phần số của thuộc tính CSS với jQuery?

Tôi cần thực hiện một phép tính số dựa trên các thuộc tính CSS. Tuy nhiên, khi tôi sử dụng điều này để có được thông tin:

$(this).css('marginBottom')

nó trả về giá trị '10px'. Có một mẹo để chỉ nhận được một phần số giá trị dù cho dù đó là pxhoặc %hoặc emhoặc bất cứ điều gì?

Điều này sẽ dọn sạch tất cả các chữ số không có chữ số, không dấu chấm và không dấu trừ khỏi chuỗi:

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

CẬP NHẬT cho các giá trị âm

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

parseInt sẽ tự động bỏ qua các đơn vị.

Ví dụ:

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

Với phương thức thay thế, giá trị css của bạn là một chuỗi chứ không phải là một số.

Phương pháp này sạch hơn, đơn giản và trả về một số:

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

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

Ngay cả khi marginBottom được xác định trong em, giá trị bên trong parseFloat ở trên sẽ bằng px, vì đó là thuộc tính CSS được tính toán.

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

Tôi sử dụng một plugin jQuery đơn giản để trả về giá trị số của bất kỳ thuộc tính CSS nào.

Nó áp dụng parseFloatcho giá trị được trả về bởi cssphương thức mặc định của jQuery .

Định nghĩa Plugin:

$.fn.cssNum = function(){
  return parseFloat($.fn.css.apply(this,arguments));
}

Sử dụng:

var element = $('.selector-class');
var numericWidth = element.cssNum('width') * 10 + 'px';
element.css('width', numericWidth);

Giả sử bạn có một thuộc tính dưới lề được đặt thành 20px / 20% / 20em. Để lấy giá trị dưới dạng số, có hai tùy chọn:

Lựa chọn 1:

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

Hàm parseInt () phân tích một chuỗi và trả về một số nguyên. Không thay đổi 10 được tìm thấy trong chức năng trên (được gọi là "cơ số") trừ khi bạn biết bạn đang làm gì.

Ví dụ đầu ra sẽ là: 20 (nếu đặt lề dưới được đặt ở px) cho% và em sẽ xuất số tương đối dựa trên kích thước Phần tử / Phông chữ gốc hiện tại.

Tùy chọn 2 (Cá nhân tôi thích tùy chọn này)

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

Ví dụ đầu ra sẽ là: 20 (nếu đặt lề dưới được đặt ở px) cho% và em sẽ xuất số tương đối dựa trên kích thước Phần tử / Phông chữ gốc hiện tại.

Hàm parseFloat () phân tích cú pháp một chuỗi và trả về số dấu phẩy động.

Hàm parseFloat () xác định nếu ký tự đầu tiên trong chuỗi được chỉ định là một số. Nếu có, nó phân tích chuỗi cho đến khi đến cuối số và trả về số dưới dạng số, không phải là chuỗi.

Ưu điểm của Tùy chọn 2 là nếu bạn nhận được các số thập phân được trả về (ví dụ: 20.32322px), bạn sẽ nhận được số được trả về với các giá trị phía sau dấu thập phân. Hữu ích nếu bạn cần trả về các số cụ thể, ví dụ: nếu phần dưới lề của bạn được đặt thành em hoặc %

parseintsẽ cắt bất kỳ giá trị thập phân (ví dụ như 1.5emcho1 ).

Hãy thử một replacehàm với regex, vd

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

Id đi cho:

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

Cách đơn giản nhất để có được chiều rộng phần tử không có đơn vị là:

target.width()

Nguồn: https://api.jquery.com/ thong / # thong2

Bạn có thể thực hiện jQuery rất đơn giản này plugin :

Định nghĩa Plugin:

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

Nó chống lại NaNcác giá trị có thể xảy ra trong phiên bản IE cũ (sẽ trả về0 thay thế)

Sử dụng:

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

Thưởng thức! :)

Để cải thiện câu trả lời được chấp nhận, hãy sử dụng:

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

Nếu nó chỉ dành cho "px", bạn cũng có thể sử dụng:

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

Nên loại bỏ các đơn vị trong khi bảo quản số thập phân.

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

sử dụng

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

trong đó trả về một mảng. chỉ mục đầu tiên trả về giá trị của lề dưới (ví dụ 20 cho 20px) và chỉ mục thứ hai trả về đơn vị dưới cùng của lề (ví dụ px cho 20px)