Question

我已经按照说明如何使特定的div高度占据整个文档。我创建了以下函数，它在首次加载页面时非常有效。

function resizeBody() {
        $(document).ready(function () {
            $(window).resize(function() {
                $('.body').height((document).height - $(".topbar").height() - 30);
            });
            $(window).resize();
            console.log(document.height);
        });
    };

在我的代码的另一部分中，我隐藏并使用jquery显示div来创建选项卡。这些标签都有不同的高度。代码如下：

$(document).ready(function() {
        $(".tab").click(function () {
            $(".tab_content").hide();
            $(".tab").css("font-weight","normal");
            resizeBody();
        });
        $("#infoButton").click(function() {
            $("#info").show();
            $("#infoButton").css("font-weight", "bold");
        });
        $("#toolsButton").click(function () {
            $("#tools").show();
            $("#toolsButton").css("font-weight", "bold");
        });
        $("#dataButton").click(function () {
            $("#data").show();
            $("#dataButton").css("font-weight", "bold");
        });
        $("#visButton").click(function () {
            $("#vis").css('display','inline-block');
            $("#visButton").css("font-weight", "bold");
        });
        resizeBody();
    });

我的问题是，当我隐藏或显示div时，文档的属性不会更新。在resizeBody（）函数中调用console.log（document.height）仍然会打印文档的原始高度。奇怪的是，当我直接在开发人员控制台中输入“document.height”时，会打印正确的（已调整大小的）值。

此外，在打开开发人员控制台后，页面似乎更新（没有任何类型的刷新）并正确调整了body div的大小。

我在这里缺少什么？这是Chrome特有的问题，还是我误解了javascript处理文档对象的方式。

值得注意的是，我的所有div都使用inline-block作为显示样式。每个div在Web检查器中为其高度提供特定值。

document.height不受jquery调用的影响。

0 个答案: