Как получить минимальную высоту объекта, когда для его родителя установлено значение none? - PullRequest
Новая
       8

Как получить минимальную высоту объекта, когда для его родителя установлено значение none?

3 голосов
/ 19 марта 2012

Почему я не могу получить min-height объекта, когда его родительский установлен на 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>

JQuery 

$(document).ready(function(){

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

});

jsfiddle

Как я могу получить min-height объекта, даже если для его родителя установлено значение display none?

Ответы [ 2 ]

10 голосов
/ 19 марта 2012

Когда элемент не отображается, он не имеет высоты или ширины.

Вы можете извлечь атрибут 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, не обязательно являются той, какой будет высота, когда элемент будет наконец отображаться, - это только то, что вы хотите высоту, чтобы будет.

1 голос
/ 19 марта 2012 
$('.object img').each(function(){
    alert($(this).parent().css("min-height"));
});

, то есть для получения атрибута css, скрытый объект не имеет высоты или ширины, поэтому вам нужно будет отобразить его, получить измерения и скрыть его.

что-то вроде следующего: http://jsfiddle.net/c2vrr/

обратите внимание, что если DOM не «огромный» - он будет мгновенным, и вы не увидите «кратко отображаемые» элементы.

...