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">
    $(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>

Answer 4

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

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

4 个答案: