javascript - 如何让jQuery在窗口调整大小时动态添加css

Question

我目前正在水平和垂直对齐一个 div。它的宽度和高度取决于其孩子的大小。我正在使用此代码成功地做到这一点。

$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});

我希望它在调整页面窗口大小时继续工作，因为它目前没有。任何帮助都会很棒。谢谢

在你的帮助下，我得到了它的工作。这是布置代码的最佳方式吗？

<script>
    $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});

    $(window).resize(function() {
        $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
    });
</script>

Answer 1

您是否尝试过使用jQuery 窗口调整大小功能$(window).resize(function() {} );？每当调整页面大小时，都会调用此函数中的任何内容：

$(window).resize(function() {
    $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});

});

您也可以通过手动调用此函数$(window).resize();