รับค่าสูงสุด css เป็นตัวเลขไม่ใช่สตริง?

ใน jQuery คุณจะได้รับตำแหน่งสูงสุดเมื่อเทียบกับผู้ปกครองเป็นตัวเลข แต่คุณไม่สามารถได้รับค่าด้านบน CSS pxเป็นตัวเลขถ้ามันตั้งอยู่ใน
สมมติว่าฉันมีสิ่งต่อไปนี้:

#elem{
  position:relative;
  top:10px;
 }

<div>
  Bla text bla this takes op vertical space....
  <div id='elem'>bla</div>
</div>

$('#elem').position().top; //Returns the number (10+(the vertical space took by the text))
$('#elem').css('top'); //Returns the string '10px'

แต่ฉันต้องการที่จะมี CSS 10ด้านบนสถานที่ให้บริการเป็นจำนวน
เราจะบรรลุสิ่งนี้ได้อย่างไร?

คุณสามารถใช้ฟังก์ชัน parseInt () เพื่อแปลงสตริงเป็นตัวเลขเช่น:

parseInt($('#elem').css('top'));

Update: (ตามที่ Ben แนะนำ): คุณควรให้ radix ด้วย:

parseInt($('#elem').css('top'), 10);

บังคับให้แยกวิเคราะห์เป็นเลขฐานสิบมิฉะนั้นสตริงที่ขึ้นต้นด้วย '0' อาจถูกแยกวิเคราะห์เป็นเลขฐานแปด (อาจขึ้นอยู่กับเบราว์เซอร์ที่ใช้)

ปลั๊กอิน jQuery ตามคำตอบของ M4N

jQuery.fn.cssNumber = function(prop){
    var v = parseInt(this.css(prop),10);
    return isNaN(v) ? 0 : v;
};

แล้วคุณก็ใช้วิธีนี้เพื่อรับค่าตัวเลข

$("#logo").cssNumber("top")

ปลั๊กอินที่ใช้งานได้จริง / มีประสิทธิภาพมากขึ้นเล็กน้อยตามคำตอบของ Ivan Castellanos (ซึ่งอ้างอิงจากคำตอบของ M4N) การใช้|| 0จะแปลงน่านเป็น 0 โดยไม่มีขั้นตอนการทดสอบ

ฉันยังจัดเตรียมรูปแบบ float และ int เพื่อให้เหมาะกับการใช้งานที่ต้องการ:

jQuery.fn.cssInt = function (prop) {
    return parseInt(this.css(prop), 10) || 0;
};

jQuery.fn.cssFloat = function (prop) {
    return parseFloat(this.css(prop)) || 0;
};

การใช้งาน:

$('#elem').cssInt('top');    // e.g. returns 123 as an int
$('#elem').cssFloat('top');  // e.g. Returns 123.45 as a float

ทดสอบซอบนhttp://jsfiddle.net/TrueBlueAussie/E5LTu/