在用户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 $content = $('.content'),
    contentHeight = $content.height(),
    contentWidth = $content.width(),
    $closestHidden,
    styleAttrValue,
    limit = 20; //failsafe

if (!contentHeight) {
    $closestHidden = $content;
    //if the main element itself isn't hidden then roll through the parents
    if ($closestHidden.css('display') !== 'none') { 
        while ($closestHidden.css('display') !== 'none' && $closestHidden.size() && limit) {
            $closestHidden = $closestHidden.parent().closest(':hidden');
            limit--;
        }
    }
    styleAttrValue = $closestHidden.attr('style');
    $closestHidden.css({
        position:   'absolute',
        visibility: 'hidden',
        display:    'block'
    });
    contentHeight = $content.height();
    contentWidth = $content.width();

    if (styleAttrValue) {
        $closestHidden.attr('style',styleAttrValue);
    } else {
        $closestHidden.removeAttr('style');
    }
}

事实上，这是Nick, Gregory和Eyelidlessness的响应的合并，让您使用Gregory的改进方法，但使用这两种方法，以防在style属性中应该有您想要放回去的东西，并寻找父元素。

我对我的解决方案唯一的不满是，通过父节点的循环不是完全有效的。

根据定义，元素只有在可见时才有高度。

只是好奇:为什么需要隐藏元素的高度?

一种替代方法是通过将元素放在某种覆盖层的后面(使用z-index)来有效地隐藏元素。

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

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

use

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

会给你隐藏元素的正确值或者元素有一个隐藏的父元素。

完整的文件请见这里。页面中还包括一个演示。

希望这对你有所帮助:)

一种解决方法是在你想要获取高度的元素外面创建一个父div，应用高度为“0”并隐藏任何溢出。接下来，获取子元素的高度并删除父元素的overflow属性。

Var height = $("#child").height(); //在这里做点什么 $(" #父母”).append(高度).removeClass(“overflow-y-hidden”); .overflow-y-hidden { 高度:0 px; overflow-y:隐藏; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <div id="parent" class="overflow-y-hidden"> < div id = "孩子" > 这是一些我想要得到高度的内容! < / div > < / div >

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

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