jQuery:height()/ width()和"display:none"

Question

jQuery:height()/ width()和"display:none"

我总是认为具有display:noneCSS样式的元素为height()和返回0 width().

但在这个例子中:

HTML

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

Run Code Online (Sandbox Code Playgroud)

CSS

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

Run Code Online (Sandbox Code Playgroud)

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

怎么会？我看到过去有很多次回来过.

Answer 1

Nic*_*ver 55

如果一个元素的offsetWidth的0(jQuery是考虑这个"隐藏"),检查这里的话,试图弄清楚的高度应该是什么.它在检查期间在元素via上设置以下属性 jQuery.swap():

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

然后它获取高度,通过getWidthOrHeight(...)该高度,augmentWidthOrHeight(...)根据框模型添加边框/填充,并将所有上述属性恢复为以前的值.

所以基本上它正在接受元素,从文档流中显示它,获得高度,然后再次隐藏它,所有这些都在UI线程更新之前,所以你永远不会看到这种情况发生.它这样做,那么.height()/ .width()作品,甚至在当前隐藏,只要他们的父母是可见的元素......这样你就可以运行.height()/ .width(),而不做显示/隐藏把戏它做在你的代码,它的内部处理.height()和.width().

@elluca - 你需要暂时`.show()`在测量`.hide()之后的父项如果你希望它保持隐藏状态,那么用户将不会看到自UI线程获胜以来的任何变化在这期间不要更新. (4认同)
请注意,如果正常流程中的父元素未设置为绝对定位模型的包含元素,则可能会给出错误值. (2认同)
我经常发现jQuery的内部交换内容一直都不准确.在某些情况下(不幸的是,我还没有完全确定哪些......),它只有几个像素.为了避免这种情况,我仍然经常回到`elem.show(); elem.height(); elem.hide()的手动程序.在上面的评论中提到了尼克.我发现这更可靠,并且 - 正如他所提到的 - 对UI没有任何影响. (2认同)

Answer 2

Bra*_*one 5

编辑

从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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，1 月前
查看次数：	39612 次
最近记录：	10 年，9 月前