隐藏的div高度(更改我的建议) [英] Hidden div height (changing my advice)

问题描述

好吧，我打算在这里回答某人关于他们的脚本为什么不起作用的问题.他们将内容加载到一个隐藏的div中，然后获得高度，以便可以为包装的div设置动画.但是我总是尝试测试我提供的代码.因此，我制作了此演示来向他们证明.

Ok, I was going to answer someone's question here on SO about why their script wasn't working. They loaded content into a hidden div, then got the height so they could animate the wrapping div. But I always try to test the code I provide. So I made this demo to prove it to them.

所以，嗯，我是进入暮光区还是我现在正在做梦? 捏自己哦！

So, umm, have I entered the twilight zone or am I dreaming right now? pinches self OUCH!

我尝试在Firefox，IE和Chrome中演示该示例，并且两种方法都返回相同的值.萤火虫说零！我重新启动计算机，甚至更改了一些代码(删除了height函数)，并使用jQuery 1.3.2进行了尝试，但仍然可以使用！我知道 USED 的隐藏元素会返回零值.甚至这个 SO答案都给出了我会得到的建议！

I tried that demo in Firefox, IE and Chrome and both methods return the same value. Firebug says zero! I rebooted my computer and I even changed the code a bit (removed the height function) and tried it with jQuery 1.3.2 and it still worked! I know hidden elements USED to return a zero value. Even this SO Answer is giving the advice I would have!

所以我想我的问题是...我错过了什么吗?还是我们给出了不好的建议?

So I guess my question is... did I miss something or are we giving bad advice?

推荐答案

查看jQuery 1.4.2和1.3.2源代码，当您在隐藏元素上调用width()或height()时，它实际上自动执行此操作.它设置以下属性:

Looking at the jQuery 1.4.2 and 1.3.2 source code, it actually performs this automatically when you call width() or height() on a hidden element. It sets the following attributes:

{ position: "absolute", visibility: "hidden", display:"block" }

然后获取宽度/高度，并恢复属性的旧值.

Then it gets the width/height, and restores the old values of the attributes.

因此，您无需自己更改属性-jQuery将为您处理.

So there is no need to change the attributes yourself - jQuery will handle it for you.

<编辑>
这将允许您获取隐藏元素的尺寸.但是，当该元素包含在另一个隐藏元素中时，它将不起作用-高度为0.在这种情况下，您将需要其他解决方案，例如

<Edit>
This will allow you to get the dimensions of a hidden element. However, it won't work when the element is contained within another hidden element - you'll get a height of 0. In that case you'd need another solution, possibly like this answer.
</Edit>

以下是1.4.2中源代码的相关位:

Here are the relevant bits of the source code from 1.4.2:

cssShow = { position: "absolute", visibility: "hidden", display:"block" },

//[undocumented jQuery.css function which is called by .height() and .width()]
css: function( elem, name, force, extra ) {
    if ( name === "width" || name === "height" ) {
        var val, props = cssShow, ....

        function getWH() {
            ... this function gets the actual width/height into the variable val
        }

        if ( elem.offsetWidth !== 0 ) {
            getWH();
        } else {
            jQuery.swap( elem, props, getWH );
        }

        return Math.max(0, Math.round(val));
    }
    return jQuery.curCSS( elem, name, force );
},

// A method for quickly swapping in/out CSS properties to get correct calculations
swap: function( elem, options, callback ) {
    var old = {};

    // Remember the old values, and insert the new ones
    for ( var name in options ) {
        old[ name ] = elem.style[ name ];
        elem.style[ name ] = options[ name ];
    }

    callback.call( elem );

    // Revert the old values
    for ( var name in options ) {
        elem.style[ name ] = old[ name ];
    }
}

这篇关于隐藏的div高度(更改我的建议)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！