OffsetWidth d'un élément non affiché...

Bonjour,

Je suis surpris de n'avoir pas trouvé de référence à ce problême dans les archives du forum. Le problême en question me parait pourtant bien commun : lorsqu'on récupère la largeur d'un noeud du Dom par la méthode offsetWidth, si l'élément n'est pas affiché (ou n'est pas encore inséré dans le dom), la valeur retournée est nulle. C'est logique dans le cas où l'objet n'est pas dans le dom, puisque souvent cette largeur n'est déterminé qu'à posteriori, par rapport à son contexte. Mais dans le cas où l'objet n'est simplement pas visible, c'est abusé...

Est-ce qu'il existe un moyen de contourner ce problême ?

Merci,
et bon week-end.

Non, je ne pense pas. Par contre tu peux toujours essayer de l'afficher, récupérer la taille et ensuite le masquer à nouveau... en espérant que l'utilisateur ne percevra pas un rapide clignotement horrible.

Il me semble que quand l'objet est en visibility:hidden, il est possible de récupérer sa hauteur. A vérifier.

Sinon tu peux toujours l'exiler en dehors de l'ecran avec un position:absolute left:-3000px ou bien le cacher dans une boite de hauteur nulle avec overflow:hidden. J'imagine qu'il doit encore y avoir des solutions...

C'est vrai que c'est souvent utile par exemple pour placer une image au centre de l'écran avant qu'elle n'apparaisse (il faut bien sur qu'elle soit chargée pour récupérer sa taille)

matmat a écrit :
Il me semble que quand l'objet est en visibility:hidden, il est possible de récupérer sa hauteur. A vérifier.

Il me semble aussi... Mais dans ce cas, l'objet est à sa place dans le flux. ce n'est pas toujours possible d'arriver à ce qu'on veut juste en rendant invisible un élément.

matmat a écrit :

le cacher dans une boite de hauteur nulle avec overflow:hidden. J'imagine qu'il doit encore y avoir des solutions...

c'est une bonne idée; j'aurais aimé qu'il existe une solution plus "propre", mais faute de mieux...

Comme propose QuentinC, l'afficher, récupérer sa taille puis le remasquer reste la solution que je privilégie dans ces cas là. La rapidité de l'exécution ne devrait normalement pas poser de problème de clignotement.

+1
J'ai utilisé cette technique plusieurs fois sans avoir de clignotement.