1

私がやろうとしているのは、余白のサイズとコンテンツのサイズが変わっても、コンテンツが常にコンテナーの中央にあるようにすることです。これは、コンテンツのマージンと幅を考慮して、コンテナーのサイズを独自に変更する必要があることも意味します。これは、関数の一般的なセットアップと出力を提供するアラートを持つ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"));
});

理論的には、投稿の幅を変更するために設定した関数を使用できますが、アラートでわかるように、余白は10 ではなく10pxであるため、余白の計算を行うことはできません。そのため、数学はNaNとして返されます ...マージン設定を ßpx から ß だけにする方法はありますか?

4

1 に答える 1

1

：Numberに置き換えた後'px'、文字列を解析してマージンの数値を取得できます。''

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

これが更新されたフィドルです。

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));
});
于 2013-03-09T05:15:58.367 に答える