如果你之前已经在页面上显示了元素，你可以直接从DOM元素中获取高度(在jQuery中可以通过.get(0)获得)，因为即使在元素隐藏时它也会被设置:

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

宽度也一样:

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

(感谢Skeets O'Reilly的更正)

以尼克的回答为基础:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").css({'position':'static','visibility':'visible', 'display':'none'});

我发现这样做更好:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").removeAttr('style');

设置CSS属性将内联插入它们，这将覆盖你在CSS文件中的任何其他属性。通过删除HTML元素上的style属性，一切恢复正常，仍然是隐藏的，因为它最初是隐藏的。

你混淆了两种CSS样式，显示样式和可见样式。

如果元素通过设置可见性css样式隐藏，那么无论元素是否可见，您都应该能够获得高度，因为元素仍然占据页面上的空间。

如果通过将display css样式更改为“none”来隐藏元素，那么元素在页面上不占空间，您将不得不给它一个显示样式，这将导致元素在一些空间中呈现，在这一点上，您可以获得高度。

我试图找到隐藏元素的工作函数，但我意识到CSS比每个人想象的复杂得多。CSS3中有很多新的布局技术，这些技术可能并不适用于以前的所有问题，比如灵活的盒子、网格、列，甚至复杂的父元素中的元素。

flexibox例子

我认为唯一可持续且简单的解决方案是实时渲染。这时，浏览器将为您提供正确的元素大小。

遗憾的是，JavaScript不提供任何直接事件来通知元素何时显示或隐藏。然而，我创建了一些基于DOM属性修改API的函数，当元素的可见性发生变化时，将执行回调函数。

$('[selector]').onVisibleChanged(function(e, isVisible)
{
    var realWidth = $('[selector]').width();
    var realHeight = $('[selector]').height();

    // render or adjust something
});

更多信息，请访问我的项目GitHub。

https://github.com/Soul-Master/visible.event.js

演示:http://jsbin.com/ETiGIre/7

在用户Nick的回答和用户hitautodestruct的JSBin插件的基础上，我创建了一个类似的jQuery插件，它检索宽度和高度，并返回一个包含这些值的对象。

可以在这里找到: http://jsbin.com/ikogez/3/

更新

我已经完全重新设计了这个小插件，因为原来的版本(上面提到的)在现实生活环境中并不能真正使用，因为那里发生了很多DOM操作。

这是完美的:

/**
 * getSize plugin
 * This plugin can be used to get the width and height from hidden elements in the DOM.
 * It can be used on a jQuery element and will retun an object containing the width
 * and height of that element.
 *
 * Discussed at StackOverflow:
 * http://stackoverflow.com/a/8839261/1146033
 *
 * @author Robin van Baalen <robin@neverwoods.com>
 * @version 1.1
 * 
 * CHANGELOG
 *  1.0 - Initial release
 *  1.1 - Completely revamped internal logic to be compatible with javascript-intense environments
 *
 * @return {object} The returned object is a native javascript object
 *                  (not jQuery, and therefore not chainable!!) that
 *                  contains the width and height of the given element.
 */
$.fn.getSize = function() {    
    var $wrap = $("<div />").appendTo($("body"));
    $wrap.css({
        "position":   "absolute !important",
        "visibility": "hidden !important",
        "display":    "block !important"
    });

    $clone = $(this).clone().appendTo($wrap);

    sizes = {
        "width": $clone.width(),
        "height": $clone.height()
    };

    $wrap.remove();

    return sizes;
};

你可以这样做，虽然有点俗气，如果位置已经是绝对的，就忘记它:

var previousCss  = $("#myDiv").attr("style");

$("#myDiv").css({
    position:   'absolute', // Optional if #myDiv is already absolute
    visibility: 'hidden',
    display:    'block'
});

optionHeight = $("#myDiv").height();

$("#myDiv").attr("style", previousCss ? previousCss : "");