用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

您可以''更换'px'后解析字符串转换成Number获得保证金的数值：

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)); 
});