jQuery使用css高度调整大小函数

jQuery resize function with css height

本文关键字：函数 调整 高度 使用 css jQuery      更新时间：2023-09-26

我正在尝试为其父级的div设置一个高度。我试过了，当我使用console.log()时，它实际上是有效的。但如果不刷新，高度就不会设置。。。。。

这是我的功能

// Set Hight
function fixingHeight() {
    function setHeight() {
        var windowWidth = window.innerWidth;
        var latestPostsWrapperHeight = $('#latestPosts').height();
        var tabPane = $('#latestPosts').find('.tab-pane');
        var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');
        var popularPostsWrapperHeight = $('#popularPosts').height();
        var profileWrapper = $('#popularPosts').find('.pofile-wrapper');
        if(windowWidth > 767) {
            $.each(tabPane, function() {
                $(this).height(latestPostsWrapperHeight - 70);
            });
            $.each(tabPaneLists, function() {
                $(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
            });
            $.each(profileWrapper, function() {
                $(this).outerHeight(popularPostsWrapperHeight);
            });
        }
        //console.log(windowWidth);
    }setHeight();
    $(window).resize(function() {
      setHeight();
    });
}fixingHeight();
  • 要处理窗口大小调整事件，请在函数setHeight()之外调用函数$(window).resize
  • 要在第一次加载时调用setHeight()，请使用jquery处理程序$(document).ready

这是最后一个代码：

function setHeight() {
    var windowWidth = window.innerWidth;
    var latestPostsWrapperHeight = $('#latestPosts').height();
    var tabPane = $('#latestPosts').find('.tab-pane');
    var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');
    var popularPostsWrapperHeight = $('#popularPosts').height();
    var profileWrapper = $('#popularPosts').find('.pofile-wrapper');
    if(windowWidth > 767) {
        $.each(tabPane, function() {
            $(this).height(latestPostsWrapperHeight - 70);
        });
        $.each(tabPaneLists, function() {
            $(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
        });
        $.each(profileWrapper, function() {
            $(this).outerHeight(popularPostsWrapperHeight);
        });
    }
    console.log(windowWidth);
}
$(document).ready(function() {
  setHeight();
});
$(window).resize(function() {
  setHeight();
});
  • 删除函数包装fixingHeight()，"setHeight（）"就足够了
  • $(window).resize不会运行，因为它在函数中，所以如果不调用函数包装器，它就无法运行，所以请将它放在函数之外

  • 正如@joram所说，当您的文档加载完成时，您可以调用$(document).ready，所以准备好了。

    $(document).ready(function() {
  setHeight();
});
$(window).resize(function() {
  setHeight();
});        
function setHeight() {
    var windowWidth = window.innerWidth;
    console.log(windowWidth);
    var latestPostsWrapperHeight = $('#latestPosts').height();
    var tabPane = $('#latestPosts').find('.tab-pane');
    var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');
    var popularPostsWrapperHeight = $('#popularPosts').height();
    var profileWrapper = $('#popularPosts').find('.pofile-wrapper');
    if(windowWidth > 767) {
        $.each(tabPane, function() {
            $(this).height(latestPostsWrapperHeight - 70);
        });
        $.each(tabPaneLists, function() {
            $(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
        });
        $.each(profileWrapper, function() {
            $(this).outerHeight(popularPostsWrapperHeight);
        });
    }
}
相关文章：