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

jQuery : height()/width() vs. "display:none"

Vous avez peut-être supposé que les éléments avec un style CSS de "display:none" renverrait 0 pour height() et width() dans jQuery. Cependant, comme le démontre l'exemple fourni, ce n'est pas toujours le cas.

Pourquoi cela se produit-il ? Pour comprendre ce comportement, nous devons approfondir la façon dont jQuery gère les éléments cachés.

Si un élément a un offsetWidth de 0 (que jQuery interprète comme "caché"), il tente de déterminer sa hauteur. Il le fait en modifiant temporairement le style de l'élément :

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

Une fois la hauteur obtenue via getWidthOrHeight(...) et ajustée pour les bordures et le remplissage si nécessaire, le style précédent est restauré.

En substance, jQuery prend l'élément caché et l'affiche temporairement en dehors du flux documentaire, récupère sa hauteur, puis la masque à nouveau, le tout sans affecter l'apparence visuelle de la page. Cela permet à height() et width() de fournir des mesures précises même pour les éléments cachés, à condition que leurs parents soient visibles.

Ce mécanisme est intégré aux méthodes height() et width() de jQuery, éliminant ainsi le besoin de votre part. pour manipuler manuellement la visibilité de l'élément.

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!