web-dev-qa-db-fra.com

Obtenir le décalage d'un élément caché

Comment puis-je obtenir les coordonnées d'un élément caché? offset() ne supporte pas l'utilisation des éléments cachés. Des allusions?

37
Simon

Si .hide() a été appelé dans votre élément ou s'il contient display:none en css, le navigateur ne l’a pas rendu du tout. Dans ce cas, la réponse n’est pas directement. Dans jQueries récentes, vous ne pouvez même pas obtenir sa largeur ou sa hauteur.

Par contre, si vous .show() un élément, puis .hide() avant les boucles d’exécution (un événement se déclenchant jusqu’à ce qu’il n’y ait plus de code à exécuter pour cet événement), le navigateur sera forcé de relayer la page et vous serez capable d’obtenir son décalage entre le moment où il est affiché et celui qui est caché, mais il ne sera pas obligé de repeindre, afin que vos utilisateurs ne voient pas le moindre blip, et vous ne perdrez pas autant de performances que vous pourriez le penser.

46
Clint Tseng

Vous pouvez obtenir les coordonnées de l'élément visibility:hidden, mais l'élément display:none est exclu de l'arborescence de rendu. Donc, sa position est indéfinie.

29
c-smile

Outre la procédure rapide d'exposition et de masquage, il peut être possible d'utiliser simplement le masque de chargement pour prétendre que l'écran (ou une partie de celui-ci) est invisible. 

Cela s'est produit lorsque je travaillais sur une carte contenant des éléments cachés. J'avais besoin de lire les css-positions/décalages sans afficher ces éléments. Je suis venu avec trois méthodes possibles à utiliser: 

  • charge le masque sur la carte pour le moment, de sorte que la carte n'affiche pas les éléments masqués et ne lise pas les décalages (problème: la superposition masque également l'élément parent (la carte) également). Cela fonctionne mieux s'il n'y a pas d'élément parent qui nécessite un affichage.

  • changez l'index z des éléments masqués, de sorte qu'ils passent derrière l'élément parent, affichent et lisent les valeurs, les cachent et modifient l'index z en original.

  • utilisez des variables de données distinctes pour les styles CSS, afin qu'elles fassent partie de element. Cela fonctionne bien si les éléments ont des positions fixes/absolues par rapport à window ou à certains éléments, car les positions/décalages css ne changeront pas en fonction de la taille de la fenêtre/de l’élément. Cela a bien fonctionné dans mon cas, car je travaillais avec des éléments absolute contre window (application plein écran/fenêtre).

D'autres méthodes suggérées par les utilisateurs fonctionnent aussi, mais tout dépend de ce sur quoi vous travaillez.

0
Janne