HTML

<div id="target" style="display:none;">
a
</div>

CSS

alert($("#target").height());

他们没有：http://jsfiddle.net/Gts6A/2/

为什么？我看到过去有很多次回来过。

Answer 1

如果一个元素的offsetWidth为0（jQuery正在考虑这个“隐藏”），checked here，那么它会尝试找出高度应该是多少。在检查期间通过sets对元素properties jQuery.swap()进行了getWidthOrHeight(...)：

position: "absolute"
visibility: "hidden"
display: "block"

然后通过augmentWidthOrHeight(...)获取高度，如果需要，可以通过.height()添加边框/填充，具体取决于框模型，并将所有上述属性恢复为以前的值。

所以基本上它正在取出元素，从文档流中显示它，获得高度，然后再次隐藏它，所有这些都在UI线程更新之前，所以你永远不会看到这种情况发生。这样做.width() / .height()即使在当前隐藏的元素上也有效，只要他们的父母可见...这样您就可以运行.width() / .height() ，没有在代码中执行显示/隐藏技巧，它在.width()和{{3}}内处理。

Answer 2

修改

从jQuery 1.4.4开始，这似乎已得到纠正

示例：http://jsfiddle.net/GALc7/1/

我相信这只适用于父级为“display：none”的项目

请参阅有关此问题的文章http://dev.jquery.com/ticket/125

此外，请参阅此示例（另存为.html文件）或查看（http://jsfiddle.net/GALc7/）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Example</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            alert($("#target").height());
        });
    </script>
</head>

<body>
    <div id="parent" style="display:none;">
        <div id="target" style="height:100px;display:block;">
            a
        </div>
    </div>
</body>
</html>

jQuery：height（）/ width（）和“display：none”

HTML

CSS

2 个答案:

修改