jquery - JQuery：如何在浏览器调整大小时更新变量？

Question

<script>
    $(document).ready ( function () {
        var footerheight = $('#footer').height();
        $('#footer').css('height', footerheight);
        $('#footer').css('marginTop', - footerheight);
        $('#nonfooterinner').css('paddingBottom', footerheight);
    });
    $(window).bind("resize", function () {
        var footerheight = $('#footer').height();
        $('#footer').css('height', footerheight);
        $('#footer').css('marginTop', - footerheight);
        $('#nonfooterinner').css('paddingBottom', footerheight);
    });
</script>

这是设置变量“footerheight”以在浏览器调整大小时更新的正确/首选方法吗？脚本的上半部分显然决定了文档加载时的变量，但我不确定下半部分是否正确编写脚本以在窗口扩展/收缩时更新该变量。

Answer 1

您可以通过使用变量来稍微压缩它，例如：

var f = (function () {
       var footerheight = $('#footer').height();
       $('#footer').css('height', footerheight);
       $('#footer').css('marginTop', -footerheight);
       $('#nonfooterinner').css('paddingBottom', footerheight);
   });

$(document).ready(f);
$(window).resize(f);

对于单独调整大小，请使用.resize()，如下所示：

$(window).resize(function () {
    var footerheight = $('#footer').height();
    $('#footer').css('height', footerheight);
    $('#footer').css('marginTop', - footerheight);
    $('#nonfooterinner').css('paddingBottom', footerheight);
});

Answer 2

你可以

$(function(){
    $(window).resize(function () {
        var footerheight = $('#footer').height();
        $('#footer').css('height', footerheight);
        $('#footer').css('marginTop', - footerheight);
        $('#nonfooterinner').css('paddingBottom', footerheight);
    }).resize();
})

Answer 3

<script type="text/javascript">
        $(window).resize(function(){
            var heightBody = $(window).height();
            $(".content_cards").height(heightBody - 135);
        });$(window).resize();
    </script>

Answer 4

<script type="text/javascript">
    $(function(){
        var pageFoot = $('#footer');
        function updateFoot(){
            var footerheight=pageFoot.height();
            pageFoot.css('marginTop',-footerheight+'px'); // Doesn't have any sense to set the css height here like you do in your function.
            $('#nonfooterinner').css('paddingBottom',footerheight+'px');
        };
        $(window).on('resize', updateFoot);
        updateFoot();
    });
</script>