ti-enxame.com

jQuery: height () / width () e "display: none"

Eu sempre pensei que elementos que tinham o estilo CSS display:none Retornavam 0 para height() e width().

Mas neste exemplo:

HTML

<div id="target" style="display:none;">
a
</div>

CSS

alert($("#target").height());

eles não: http://jsfiddle.net/Gts6A/2/

Por quê? Eu já vi 0 voltar várias vezes no passado.

31
Foobarbis

Se um elemento tiver um offsetWidth de 0 (O jQuery está considerando isso "oculto"), marcado aqui , ele tentará descobrir qual deve ser a altura. Ele define o seguinte propriedades no elemento via jQuery.swap() durante a verificação:

  • position: "absolute"
  • visibility: "hidden"
  • display: "block"

Em seguida, obtém a altura, via getWidthOrHeight(...) que adiciona borda/preenchimento, se necessário, via augmentWidthOrHeight(...) dependendo do modelo da caixa e reverte todas as propriedades acima para seus valores anteriores.

Então, basicamente, ele está retirando o elemento, mostrando-o fora do fluxo do documento, obtendo a altura e ocultando-o novamente, tudo antes da atualização do thread da interface do usuário, para que você nunca veja isso acontecer. Faz isso para que .height() / .width() funcione, mesmo em elementos que estão ocultos no momento, desde que seus pais estejam visíveis ... para que você possa executar .height() / .width() , sem fazer o truque de mostrar/ocultar que está fazendo no seu código, é tratado dentro de .height() e .width() .

55
Nick Craver

EDITAR

Parece ter sido corrigido a partir do jQuery 1.4.4

Exemplo: http://jsfiddle.net/GALc7/1/


Eu acredito que isso só é verdade para itens cujo pai é "display: none"

Consulte este artigo sobre o assunto http://dev.jquery.com/ticket/125

Além disso, consulte este exemplo (salve como um arquivo .html) ou consulte ( http://jsfiddle.net/GALc7/ )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Example</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            alert($("#target").height());
        });
    </script>
</head>

<body>
    <div id="parent" style="display:none;">
        <div id="target" style="height:100px;display:block;">
            a
        </div>
    </div>
</body>
</html>
5
Brandon Boone