Question

假设我有一个“容器”元素，其中包含overflow:auto，内容为“contents”div。容器的高度是窗口高度的百分比，内容可以是任何高度：

<div id="container">// Height dependent on window size
    <div id="content">
    // Arbitrary amount of content here
    </div>
</div>

请求的CSS - 请注意在我的“真实世界”场景中，内容元素实际上是一个表格，其规则如下：

#container {
    height:100%;
    overflow:auto
}

#content {
    border-collapse: collapse;
    border-spacing: 0;
}

我想要做的是检查内容的高度是否超过容器，如果是，则执行一些操作。

但是，如果我只是这样做：

$(document).ready(function(){
    var containerH = $('#container').outerHeight();
    var contentH = $('#content').outerHeight();
    if ( contentH > containerH ) {
        // If the content's too big, do things...
    };
});

if语句永远不会运行，因为这两个高度总是被计算为相等 - 即使我知道并非如此。后续检查总是显示实际尺寸。

所以我想：也许元素没有完成渲染（我使用@ font-face来设置元素中的文本样式 - 也许我需要等待它完成）然后我尝试做类似的事情：

$(document).ready(function(){

    var container = $('#container');
    var content = $('#content');

    function getProperHeight(el){
        var height = el.load(function(){
            var h = this.outerHeight();
            return h;
        });
        return height;
    };

    var containerH = getProperHeight(container);
    var contentH = getProperHeight(content);

    console.log( containerH + ' ' + contentH )

};

这是我使用load()方法得到的最接近的，但是我得到了两个期望值的[object Object]。

简而言之 - 如何获得两个元素的实际渲染尺寸？

Answer 1

你可以这样......

HTML

<div id="container">
  <div id="listingNav">
    <a id="back">Back </a>
    <div id="paginationNav"></div>
    <a id="next"> Next</a>
  </div>
  <div id="content">
    // Arbitrary amount of content here
  </div>
</div>

CSS

#content {
  overflow:hidden;  
}

的Javascript

//set how tall you want you container to be
var divHeight = 624;

$(document).ready(function()
{
    //get the height of the container without styles
    var contentHeight = $('#content').height();
    //then add styles to the container
    $('#content').css('height', divHeight + 'px');
    //find out how many pages there will be
    var divPages = Math.ceil(contentHeight / divHeight);
    //loop through and create the page # anchors
    for(var i = 1; i <= divPages; i++)
    {
        $("#paginationNav").append('<a id="' + i + '" onclick="javascript:goToPage(this)">' + i + '</a>');
    } 
    //wrap every in #content with a div with the class of .content
    $('#content').children().wrapAll('<div class="content"/>');
    //program the paganation effect for next
    $('#next').click(function() {
        var current = ($('.content').css('margin-top') || '0px');
        if((current.substring(0,current.length-2) - divHeight) > -contentHeight)
        {
            $('.content').css('margin-top',current.substring(0,current.length-2) - $('#listingContainer').height() + 'px');
        }
    });
    //program the paganation effect for back
    $('#back').click(function() {
        var current = ($('.content').css('margin-top') || '0px');
        if(current.substring(0,current.length-2) < 0)
        {
            $('.content').css('margin-top',(current.substring(0,current.length-2) - -$('#listingContainer').height()) + 'px');
        }
    });
});
//program the paganation effect for each of the page # anchors
function goToPage(page)
{
    $('.content').css('margin-top', -((divHeight * page.id) - divHeight));
}

希望这有帮助。

哦.....这是使用jquery 1.9.1

我如何可靠地获得两个元素＆＃39;页面加载的尺寸

1 个答案: