隐藏的 div 高度（改变我的建议）答案

【问题标题】：Hidden div height (changing my advice)隐藏的 div 高度（改变我的建议）
【发布时间】：2016-08-02 22:57:46
【问题描述】：

好的，我打算在这里回答某人关于为什么他们的脚本不起作用的问题。他们将内容加载到隐藏的 div 中，然后获取高度，以便他们可以为包装 div 设置动画。但我总是尝试测试我提供的代码。所以我发了this demo 来证明给他们看。

那么，嗯，我现在是进入了暮光区还是在做梦？ 捏自己哎哟！

我在 Firefox、IE 和 Chrome 中尝试了该演示，两种方法都返回相同的值。 Firebug 说零！我重新启动了我的计算机，我什至稍微更改了代码（删除了高度函数）并使用 jQuery 1.3.2 进行了尝试，它仍然有效！我知道隐藏元素 USED 返回零值。就连这个SO Answer 也给出了我想要的建议！

所以我想我的问题是......我错过了什么还是我们给出了错误的建议？

【问题讨论】：

标签： jquery

【解决方案1】：

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

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

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

因此无需自己更改属性 - jQuery 会为您处理。

这将允许您获取隐藏元素的尺寸。但是，当元素包含在另一个隐藏元素中时，它将不起作用 - 您将获得 0 的高度。在这种情况下，您需要另一个解决方案，可能像 this answer。
编辑>

以下是 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 ];
    }
}

【讨论】：

非常感谢！我想我可以挖掘代码，但我不认为 1.3.2 已经实现了这个代码。我想我需要更新我的建议:)
感谢更新，但是将元素附加到正文末尾的问题是，如果父元素有大小限制，比如宽度设置，这将不适用于克隆元素，因此高度值将完全关闭。哦，好吧，考虑一下。

【解决方案2】：

我在获取隐藏元素宽度时遇到了同样的问题，所以我写了这个插件调用jQuery Actual 来修复它。而不是使用

$('#some-element').height();

使用

$('#some-element').actual('height');

将为隐藏元素或具有隐藏父元素的元素提供正确的值。

你也可以使用

// get hidden element actaul width
$( '.hidden' ).actual( 'width' );

// get hidden element actaul innerWidth
$( '.hidden' ).actual( 'innerWidth' );

// get hidden element actaul outerWidth
$( '.hidden' ).actual( 'outerWidth' );

// get hidden element actaul height
$( '.hidden' ).actual( 'height' );

// get hidden element actaul innerHeight
$( '.hidden' ).actual( 'innerHeight' );

// get hidden element actaul outerHeight
$( '.hidden' ).actual( 'outerHeight' );

完整文档请参阅here。页面中还包含一个演示。

希望得到帮助:)

【讨论】：

【解决方案3】：

您也可以使用 javascript 的 scrollHeight 属性。

$("#id_element").attr('scrollHeight')

【讨论】：

【解决方案4】：

$('.hidden-element').get(0).height;

给出 DOM 元素的高度，该高度也设置为隐藏元素

【讨论】：