Выполнение математики с полями и шириной в jquery

Question

То, что я пытаюсь сделать, заключается в том, что контент всегда находится в центре контейнера, даже если размер поля и размер содержимого изменяются. Это также означает, что размер контейнера должен измениться на его собственный, учитывая размер поля и ширину содержимого. Вот JS скрипка, которая имеет общую наладку функции и предупреждение, что дает выход: http://jsfiddle.net/jpY5n/

function resizeContainer(size, distance) { 
var postWidth = size; 
var postApart = distance * 3; 
return postWidth + postApart; 
}; 
$(document).ready(function() { 
$('#container').width(resizeContainer($("#content").width(),$("#content").css("margin-left")); 
}); 

я теоретически мог бы использовать функцию я поставил для того, чтобы изменить ширину сообщения, но он не может принимать в математике поля, потому что, как вы можете видеть в предупреждении, маржа равна 10px, а не 10, поэтому математика возвращается как NaN ... Есть ли способ сделать настройки полей, скажем, ßpx просто ß?

Answer 1

Вы можете получить численное значение запаса путем разбора строки в Number после замены 'px' с '':

var margin = Number($('#content').css('margin-left').replace('px','')); 

Here's the updated Fiddle.

HTML

<div id="container"> 
    <div id="content"></div> 
</div> 

JavaScript (JQuery)

function resizeContainer(size, distance) { 
    var postWidth = size * 2; 
    var postApart = distance * 3; 
    return postWidth + postApart; 
}; 
$(document).ready(function() { 
    alert("Container width should be set to " + $("#content").width() + " times 2 plus " + $("#content").css("margin-left") + " times 3"); 
    var width = Number($('#content').width()); 
    var margin = Number($('#content').css('margin-left').replace('px','')); 
    $('#content').width(resizeContainer(width,margin)); 
});