J'ai toujours pensé que les éléments qui avaient display:none Le style CSS renvoie 0 pour height() y width() .
Mais dans cet exemple :
<div id="target" style="display:none;">
a
</div>alert($("#target").height());ils ne le font pas : http://jsfiddle.net/Gts6A/2/
Comment cela ? J'ai vu 0 revenir plein de fois dans le passé.
Si un élément a un offsetWidth de 0 (jQuery considère cela comme "caché"), vérifié ici puis il essaie de déterminer quelle doit être la hauteur. Le site fixe les éléments suivants propriétés sur l'élément via jQuery.swap() pour la durée du contrôle :
position: "absolute"visibility: "hidden"display: "block"Ensuite, il obtient la hauteur, via getWidthOrHeight(...) qui ajoute une bordure/un bourrelet si nécessaire via augmentWidthOrHeight(...) selon le modèle de boîte, et rétablit toutes les propriétés ci-dessus à leurs anciennes valeurs.
En gros, il prend l'élément, le montre en dehors du flux du document, récupère la hauteur, puis le cache à nouveau, tout cela avant que le fil de l'interface utilisateur ne soit mis à jour, de sorte que vous ne voyez jamais cela se produire. Il fait cela pour que .height() / .width() fonctionne, même sur les éléments qui sont actuellement cachés, tant que leurs parents sont visibles... vous pouvez donc lancer l'opération suivante .height() / .width() sans faire l'astuce d'affichage et de masquage qu'elle fait dans votre code, elle est gérée dans le cadre du programme .height() y .width() .
Ce problème semble avoir été corrigé à partir de la version 1.4.4 de jQuery.
Exemple : http://jsfiddle.net/GALc7/1/
Je crois que cela n'est vrai que pour les éléments dont le parent est "display:none".
Voir cet article sur le sujet http://dev.jquery.com/ticket/125
Voir aussi cet exemple (enregistrer en tant que fichier .html) ou voir ( 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> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
