我需要得到一个元素的高度,在一个div是隐藏的。现在我显示div,获得高度,并隐藏父div。这看起来有点傻。有没有更好的办法?

我使用jQuery 1.4.2:

$select.show();
optionHeight = $firstOption.height(); //we can only get height if its visible
$select.hide();

当前回答

一种解决方法是在你想要获取高度的元素外面创建一个父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 >

其他回答

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

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

宽度也一样:

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

(感谢Skeets O'Reilly的更正)

您还可以使用负边距将隐藏的div定位到屏幕之外,而不是使用display:none,很像文本缩进图像替换技术。

eg.

position:absolute;
left:  -2000px;
top: 0;

这样,height()仍然可用。

在我的环境中,我也有一个隐藏的元素阻止我获取高度值,但它不是元素本身,而是它的父元素之一……所以我只是检查了我的一个插件,看看它是否被隐藏,否则就找到最近的隐藏元素。这里有一个例子:

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属性中应该有您想要放回去的东西,并寻找父元素。

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

以尼克的回答为基础:

$("#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属性,一切恢复正常,仍然是隐藏的,因为它最初是隐藏的。

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

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

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