jQuery Dimensions

Avec jQuery, il est facile de gérer les dimensions des éléments et des fenêtres du navigateur.

Méthodes de dimension jQuery

jQuery fournit plusieurs méthodes importantes pour gérer les dimensions :

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

Dimensions jQuery

jQuery Dimensions

Méthodes width() et height() de jQuery

La méthode width() définit ou renvoie la largeur d'un élément (hors padding, border ou margin).

La méthode height() définit ou renvoie la hauteur d'un élément (hors padding, border ou margin).

L'exemple suivant renvoie la largeur et la hauteur de l'élément <div> spécifié :

Exemple

$("button").click(function(){ var txt=""; txt+="La largeur de div est :" + $("#div1").width() + "</br>"; txt+="La hauteur de la div est :" + $("#div1").height(); $("#div1").html(txt); });

Essayez-le vous-même »

Méthodes innerWidth() et innerHeight() de jQuery

La méthode innerWidth() renvoie la largeur d'un élément (padding inclus).

La méthode innerHeight() renvoie la hauteur d'un élément (padding inclus).

L'exemple suivant renvoie la largeur/hauteur interne de l'élément <div> spécifié :

Exemple

$("button").click(function(){ var txt=""; txt+="largeur de la div, padding inclus :" + $("#div1").innerWidth() + "</br>"; txt+="hauteur de la div, padding inclus :" + $("#div1").innerHeight(); $("#div1").html(txt); });

Essayez-le vous-même »

Méthodes outerWidth() et outerHeight() de jQuery

La méthode outerWidth() retourne la largeur d'un élément (y compris le padding et la bordure).

La méthode outerHeight() retourne la hauteur d'un élément (y compris le padding et la bordure).

L'exemple suivant retourne la largeur/hauteur extérieure de l'élément <div> spécifié :

Exemple

$("button").click(function(){ var txt=""; txt+="largeur de div, y compris le padding et la bordure :" + $("#div1").outerWidth() + "</br>"; txt+="hauteur de div, y compris le padding et la bordure :" + $("#div1").outerHeight(); $("#div1").html(txt); });

Essayez-le vous-même
Autres extensions