jquery - 当其父项设置为不显示时，如何获取对象的最小高度？

Question

为什么当对象的 parent 设置为 display: none 时，我无法获取对象的 min-height，但我仍然如果最小高度未在使用中，它可以是对象的高度吗？

例如，

CSS,

li {
display:none;
}

.object {
display:block;
width:100px;
border:1px solid #000;
}

html,

<li><a href="#" class="object" style="height:200px;"><img class="element" /></a></li>
<li><a href="#" class="object" style="min-height:300px;"><img class="element" /></a></li>

j查询，

$(document).ready(function(){

    $('.object img').each(function(){
        alert($(this).parent().height());
    });

});

jsfiddle

即使对象的父级设置为display none，我如何仍然获得对象的min-height？

Answer 1

当一个元素不显示时，它没有高度或宽度。

不过，您可以提取 CSS 属性:

alert($(this).parent().css('min-height'));

http://jsfiddle.net/R5SDY/1/

请注意，这现在返回一个末尾带有“px”的字符串，而不是像 height() 那样返回一个数字。您可能需要将其解析为整数:

alert( parseInt($(this).parent().css('min-height'),10) );

显然，如果没有在 CSS 中设置 min-height，这将不起作用。根据您想要数字的用途，如果没有返回最小高度，您可能需要添加一些提取 .css('height') 的编程逻辑。

$(document).ready(function(){    
    $('.object img').each(function(){
        var h = parseInt($(this).parent().css('min-height'),10) 
            || parseInt($(this).parent().css('height'),10);
        alert(h);
    });
});
​

http://jsfiddle.net/R5SDY/2/

最后，请记住，您从 .css 获得的值不一定是元素最终显示时的高度——它们只是您想要的 高度。