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

我使用jQuery 1.4.2:

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

当前回答

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

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

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

其他回答

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

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

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

遵循Nick Craver的解决方案,设置元素的可见性可以让它获得准确的尺寸。我经常用这个方法。然而,不得不手动重置样式,我发现这很麻烦,考虑到修改元素的初始位置/显示在我的css通过开发,我经常忘记更新相关的javascript代码。下面的代码不会重置每个say的样式,而是删除javascript添加的内联样式:

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

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

$("#myDiv").attr('style', '');

这里唯一的假设是不能有其他内联样式,否则它们也会被删除。不过,这里的好处是元素的样式将返回到css样式表中的样式。因此,您可以将其写成一个函数,其中传递一个元素,并返回一个高度或宽度。

我发现通过js设置内联样式的另一个问题是,当通过css3处理过渡时,你被迫调整样式规则的权重,使其比内联样式更强,这有时会令人沮丧。

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

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

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

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

eg.

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

这样,height()仍然可用。

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

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

宽度也一样:

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

(感谢Skeets O'Reilly的更正)