Pourquoi `height()` et `width()` de jQuery renvoient-ils des valeurs non nulles pour les éléments avec `display:none` ?

Le comportement non conventionnel Height() et width() de jQuery avec "display:none"

Les méthodes height() et width() de jQuery sont largement utilisé pour déterminer les dimensions visibles des éléments sur une page Web. Cependant, il semble y avoir un comportement inattendu lorsqu'il s'agit d'éléments pour lesquels la propriété CSS "display:none" est définie.

La question

Traditionnellement, on croyait que les éléments avec "display:none" ont une hauteur et une largeur de zéro. Cependant, ce n’est pas toujours le cas avec jQuery. Considérons l'exemple suivant :

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

<code class="css">alert($("#target").height());</code>

Dans cet exemple, la hauteur de l'élément "target" n'est pas nulle mais plutôt une valeur non nulle. Cette incohérence soulève la question : pourquoi les éléments avec "display:none" renvoient-ils parfois des hauteurs et des largeurs non nulles dans jQuery ?

La réponse

Pour comprendre ce comportement , nous devons approfondir le fonctionnement interne des méthodes height() et width() de jQuery. Lorsqu'un élément a un offsetWidth visible de 0 (indiquant qu'il est "caché"), jQuery tente de calculer ses dimensions réelles. Il le fait en remplaçant temporairement les propriétés CSS de l'élément :

• position : "absolue"
• visibilité : "cachée"
• affichage : "bloc"

Avec ces modifications, jQuery récupère la hauteur de l'élément, en considérant la bordure et le remplissage si nécessaire. Une fois la hauteur déterminée, jQuery restaure les propriétés CSS d'origine, garantissant qu'aucun changement visible ne se produit.

Ce processus permet à height() et width() de fonctionner correctement pour les éléments masqués, tant que leurs parents sont visibles. Essentiellement, jQuery simule le comportement consistant à afficher l'élément en dehors du flux de documents, à récupérer ses dimensions, puis à le masquer à nouveau, le tout en coulisses en une seule opération. Cela élimine le besoin pour les développeurs d'afficher et de masquer manuellement les éléments pour obtenir leurs dimensions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!