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

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

Malgré l'hypothèse populaire selon laquelle les éléments avec "affichage :none" renvoie zéro pour les méthodes .height() et .width() de jQuery, ce n'est pas toujours le cas. Dans l'exemple fourni, l'élément cible renvoie une hauteur non nulle même s'il est masqué.

Pourquoi cela se produit-il ?

Selon le code source de jQuery, si le offsetWidth d'un élément est 0 ( indiquant que jQuery le considère comme "caché"), une série d'étapes sont prises pour déterminer la hauteur :

1. La position de l'élément est définie sur "absolue".
2. La visibilité est définie sur "caché".
3. L'affichage est défini sur "bloquer".

Cela déplace efficacement l'élément hors du flux de documents, calcule la hauteur tout en tenant compte de la bordure/du remplissage, puis rétablit les paramètres précédents.

Ainsi, jQuery rend essentiellement l'élément visible temporairement, calcule la hauteur et le rend à nouveau invisible, le tout avant que l'interface utilisateur ne soit réellement mise à jour. Cela permet à .height() et .width() de fonctionner même sur des éléments masqués tant que leurs parents sont visibles.

Les méthodes .height() et .width() gèrent ce processus d'affichage/masquage en interne, les développeurs n'ont donc pas besoin d'implémenter manuellement de telles vérifications dans leur code.

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!