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

在jquery中使用边距和宽度进行数学运算

1 个答案: