Obtenir la largeur d’un élément lorsque celui-ci est caché en javascript

Lorsqu’un élément est caché par un style display: none, et que l’on cherche sa taille à savoir la largeur width ou la hauteur height en javascript avec la propriété element.offsetWidth ou element.offsetHeight , la valeur retournée sera nulle. Ceci est tout à fait normal puisque l’élément n’est pas visible.

Les textes displat: none, hauteur ?, largeur ? en surimpression sur une photo des Spray Lakes, dans le parc provincial du mont Assiniboine, Alberta au Canada

Méthode

La méthode consiste donc à dupliquer l’élément dans le même élément parent, afin d’hériter des mêmes styles, de rendre sa position fixe position: fixed, de pousser l’élement loin de la vue de l’utilisateur, de le rendre visible, de relever la taille cherchée, puis d’effacer cette duplication.

Code

Pour lire la propriété offsetWidth, il faut effacer l’élément dupliqué avec un léger retard. Tout ceci reste invisible á l’utilisateur.

Utilisation

Et hop, une méthode de l’objet Element qui permet d’obtenir la largeur d’un élément invisible.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.