วิธีรับส่วนตัวเลขของคุณสมบัติ CSS ด้วย jQuery

ฉันต้องทำการคำนวณตัวเลขตามคุณสมบัติ CSS อย่างไรก็ตามเมื่อฉันใช้สิ่งนี้เพื่อรับข้อมูล:

$(this).css('marginBottom')

มันคืนค่า '10px' มีเคล็ดลับที่จะเพียงแค่ได้รับส่วนจำนวนของค่าไม่ว่าไม่ว่าจะเป็นpxหรือ%หรือemหรืออะไรก็ตาม?

วิธีนี้จะล้างข้อมูลที่ไม่ใช่ตัวเลขไม่ใช่จุดและเครื่องหมายลบทั้งหมดจากสตริง:

$(this).css('marginBottom').replace(/[^-\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'));

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

แม้ว่า marginBottom ที่กำหนดไว้ใน em ค่าภายใน parseFloat ด้านบนจะอยู่ใน px เนื่องจากเป็นคุณสมบัติ CSS ที่คำนวณได้

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

ฉันใช้ปลั๊กอิน jQuery ง่าย ๆ เพื่อคืนค่าตัวเลขของคุณสมบัติ CSS เดียว

มันใช้parseFloatกับค่าที่ส่งคืนโดยcssวิธีการเริ่มต้นของ jQuery

คำจำกัดความปลั๊กอิน:

$.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);

ให้เราสมมติว่าคุณตั้งค่าคุณสมบัติขอบด้านล่างเป็น 20px / 20% / 20em ในการรับค่าเป็นตัวเลขมีสองตัวเลือก:

ตัวเลือกที่ 1:

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

ฟังก์ชัน parseInt () แยกวิเคราะห์สตริงและส่งคืนจำนวนเต็ม อย่าเปลี่ยน 10 รายการที่พบในฟังก์ชั่นด้านบน (เรียกว่า "radix") เว้นแต่คุณจะรู้ว่าคุณกำลังทำอะไรอยู่

ตัวอย่างเอาต์พุตจะเป็น: 20 (หากตั้งค่าระยะขอบด้านล่างเป็น px) สำหรับ% และ em จะส่งออกจำนวนสัมพัทธ์ตามองค์ประกอบหลัก / ขนาดตัวอักษรปัจจุบัน

ตัวเลือก 2 (โดยส่วนตัวแล้วฉันชอบตัวเลือกนี้)

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

ตัวอย่างเอาต์พุตจะเป็น: 20 (หากตั้งค่าระยะขอบด้านล่างเป็น px) สำหรับ% และ em จะส่งออกจำนวนสัมพัทธ์ตามองค์ประกอบหลัก / ขนาดตัวอักษรปัจจุบัน

ฟังก์ชั่น parseFloat () แยกวิเคราะห์สตริงและส่งกลับจำนวนจุดลอยตัว

ฟังก์ชัน parseFloat () กำหนดว่าอักขระตัวแรกในสตริงที่ระบุเป็นตัวเลขหรือไม่ หากเป็นเช่นนั้นจะแยกวิเคราะห์สตริงจนกว่าจะถึงจุดสิ้นสุดของตัวเลขและส่งกลับตัวเลขเป็นตัวเลขไม่ใช่เป็นสตริง

ข้อดีของตัวเลือกที่ 2 คือถ้าคุณได้รับตัวเลขทศนิยมที่ส่งคืน (เช่น 20.32322px) คุณจะได้รับตัวเลขที่ส่งคืนพร้อมค่าที่อยู่หลังจุดทศนิยม มีประโยชน์หากคุณต้องการตัวเลขเฉพาะที่ส่งคืนตัวอย่างเช่นถ้าขอบล่างของคุณตั้งค่าเป็นemหรือ%

parseintจะตัดทอนค่าทศนิยมใด ๆ (เช่น1.5emให้1)

ลองreplaceฟังก์ชั่นด้วย regex เช่น

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

รหัสไปสำหรับ:

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

วิธีที่ง่ายที่สุดในการรับความกว้างขององค์ประกอบโดยไม่มีหน่วยคือ:

target.width()

ที่มา: https://api.jquery.com/width/#width2

คุณสามารถใช้ปลั๊กอินjQuery ที่ง่ายมากนี้:

คำจำกัดความปลั๊กอิน:

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

มันทนต่อNaNค่าที่อาจเกิดขึ้นใน IE เวอร์ชั่นเก่า (จะกลับมา0แทน)

การใช้งาน:

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

สนุก! :)

สำหรับการปรับปรุงคำตอบที่ยอมรับใช้สิ่งนี้:

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

หากเป็นเพียง "px" คุณสามารถใช้:

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

ควรถอดหน่วยในขณะที่รักษาทศนิยม

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

ใช้

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

ซึ่งส่งกลับอาร์เรย์ ดัชนีแรกคืนค่าขอบล่างของขอบ (ตัวอย่าง20สำหรับ 20px) และดัชนีที่สองส่งคืนหน่วยของขอบล่าง (ตัวอย่างpxสำหรับ 20px)