Question

为什么当父设置为min-height时，我无法获取对象的display: none，但如果最小高度我仍然能够获得对象的高度不正在使用中？

例如，

的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>

jquery的，

$(document).ready(function(){

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

});

jsfiddle

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

Answer 1

当元素未显示时，它没有高度或宽度。

您可以提取CSS属性：

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

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

请注意，现在返回一个字符串，其中包含＆＃34; px＆＃34;最后，而不是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获得的值并不一定是元素最终显示时的高度 - 它们只是您想要的高度。

Answer 2

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

只是为了获得css属性，隐藏的对象没有高度或宽度，因此您需要显示它，获取测量并隐藏它。

类似以下内容： http://jsfiddle.net/c2vrr/

请注意，只要您的DOM不是“巨大的” - 它将是即时的，您将看不到“短暂显示的”元素。

当父对象设置为none时，如何获取对象的最小高度？

2 个答案: