Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

GESTION DES DIMENSIONS EN JQUERY

Les méthodes jQuery relatives aux dimensions

Le jQuery nous fournit un set de méthodes nous permettant de modifier les dimensions des éléments. Dans cette partie, nous allons voir les méthodes suivantes :

  • La méthode width() ;
  • La méthode height() ;
  • La méthode innerWidth() ;
  • La méthode innerHeight() ;
  • La méthode outerWidth() ;
  • La méthode outerHeight() ;

Pour bien comprendre ce que va impacter chacune de ces méthodes, vous devez avant tout vous souvenir du modèle des boîtes en CSS.

Rappelez vous que tout élément peut être vu comme un empilement de boîtes :

  • La première boîte contient l’élément en soi et son contenu ;
  • La deuxième boîte contient la première boîte plus le padding ;
  • La troisième boîte contient la deuxième boîte plus la bordure ;
  • La quatrième boîte contient la troisième boîte plus la marge extérieure de l’élément.

Les méthodes width() et height()

Les méthodes width() et height() vont retourner ou nous permettre de définir la largeur et la hauteur d’un élément en soi, en excluant le padding, la bordure et la marge extérieure.

L’utilisation de ces deux méthodes ne devrait pas vous poser de problème. Voyons un exemple ensemble :

Utilisation des méthodes jQuery width() et height()

Dimensions initiales de nos paragraphes

On change les dimensions de nos éléments HTML avec width() et height()

Essayer ce code

Ici, on utilise une première fois width() et height() sans argument, en tant que getters, pour récupérer les valeurs relatives à la largeur et à la hauteur de base de nos paragraphes.

Ensuite, on définit de nouvelles largeur et hauteur pour nos paragraphes en passant les nouvelles valeurs en arguments de ces deux méthodes.

Les méthodes innerWidth() et innerHeight()

Les méthodes innerWidth() et innerHeight() vont respectivement nous permettre de récupérer la largeur de l’élément avec son padding et la hauteur de l’élément avec son padding.

On va également pouvoir utiliser ces méthodes comme setters mais ce genre d’utilisation va être beaucoup plus rare (car on ne va pas pouvoir impacter la taille du padding en soi).

Utilisation des méthodes jQuery innerWidth() et innerHeight()

On peut connaître la taille des éléments avec leur padding grace à innerWidth() et innerHeight() en jQuery

Essayer ce code

Notez bien que les padding gauche et droit (pour innerWidth()) et haut et bas (pour innerHeight()) vont être additionnés pour arriver au résultat final.

Les méthodes outerWidth() et outerHeight()

Les méthodes outerWidth() et outerHeight() vont retourner la largeur et la hauteur d’un élément en incluant la taille de son padding et de sa bordure.

Ces deux méthodes peuvent prendre un booléen en argument (valeur true ou false). Si on leur passe true, elles incluront en plus la taille de la marge extérieure dans le calcul de la largeur et la hauteur de l’élément.

Utilisation des méthodes jQuery outerWidth() et outerHeight()

On utilise outerWidth() et outerHeight() pour connaître la lageur et la hauteur totales d’un élément HTML

Essayer ce code

Une nouvelle fois, le code ci-dessus ne devrait pas vous poser de difficulté ; on se contente de récupérer les différentes informations relatives aux hauteur et largeur de nos éléments p et de les afficher..

Récapitulatif sur les dimensions en jQuery

Voici un petit schéma récapitulatif des dimensions ciblées par chacune des méthodes vues dans ce chapitre.

Les dimensions en jQuery

Chapitre précédent

Chapitre suivant