你可以做这样的事情，虽然有点hacky，忘记position它是否已经是绝对的：

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 : "");

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

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

利用

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

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

完整文档请参见此处。页面中还包含一个演示。

希望这有帮助:)

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

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

如果通过将显示 css 样式更改为“none”来隐藏元素，则该元素不会在页面上占用空间，并且您必须为其指定一个显示样式，这将导致该元素在某个空间中呈现，在哪一点，你可以得到高度。

我实际上有时会使用一些技巧来处理这个问题。我开发了一个 jQuery 滚动条小部件，在那里我遇到了一个问题，我不知道可滚动内容是否是隐藏标记的一部分。这是我所做的：

// try to grab the height of the elem
if (this.element.height() > 0) {
    var scroller_height = this.element.height();
    var scroller_width = this.element.width();

// if height is zero, then we're dealing with a hidden element
} else {
    var copied_elem = this.element.clone()
                      .attr("id", false)
                      .css({visibility:"hidden", display:"block", 
                               position:"absolute"});
    $("body").append(copied_elem);
    var scroller_height = copied_elem.height();
    var scroller_width = copied_elem.width();
    copied_elem.remove();
}

这在大多数情况下是有效的，但可能会出现一个明显的问题。如果您克隆的内容使用 CSS 设置样式，并且在其规则中包含对父标记的引用，则克隆的内容将不包含适当的样式，并且测量值可能略有不同。为了解决这个问题，您可以确保您克隆的标记应用了 CSS 规则，不包括对父标记的引用。

此外，我的滚动小部件也没有出现这种情况，但要获得克隆元素的适当高度，您需要将宽度设置为与父元素相同的宽度。就我而言，CSS 宽度始终应用于实际元素，因此我不必担心这一点，但是，如果元素没有应用于它的宽度，您可能需要执行某种递归遍历元素的 DOM 祖先以找到合适的父元素的宽度。

根据用户 Nick 的回答和 JSBin 上的用户 hitautodestruct 插件，我创建了一个类似的 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;
};