Dimensions de jQuery

Avec jQuery, il est facile de traiter les dimensions des éléments et de la fenêtre du navigateur.

Méthodes de dimension de jQuery

jQuery propose plusieurs méthodes importantes pour traiter les dimensions :

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

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

La méthode width() définit ou retourne la largeur de l'élément (sans marges internes, bordures ou marges externes).

La méthode height() définit ou retourne la hauteur de l'élément (sans marges internes, bordures ou marges externes).

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

Exemple

$("button").click(function(){
  var txt="";
  txt += "Largeur : " + $("#div1").width() + "</br>";
  txt += "Hauteur : " + $("#div1").height();
  $("#div1").html(txt);
);

Essayez-le vous-même

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

La méthode innerWidth() retourne la largeur de l'élément (y compris les marges internes).

La méthode innerHeight() retourne la hauteur de l'élément (y compris les marges internes).

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

Exemple

$("button").click(function(){
  var txt="";
  txt += "Largeur interne : " + $("#div1").innerWidth() + "</br>";
  txt += "Hauteur interne : " + $("#div1").innerHeight();
  $("#div1").html(txt);
);

Essayez-le vous-même

Méthodes jQuery outerWidth() et outerHeight()

La méthode outerWidth() retourne la largeur de l'élément (y compris la marge interne et le bord).

La méthode outerHeight() retourne la hauteur de l'élément (y compris la marge interne et le bord).

L'exemple suivant retourne l'outer-width/height d'un élément <div> spécifié :

Exemple

$("button").click(function(){
  var txt="";
  txt += "Largeur extérieure: " + $("#div1").outerWidth() + "</br>";
  txt += "Hauteur extérieure: " + $("#div1").outerHeight();
  $("#div1").html(txt);
);

Essayez-le vous-même

La méthode outerWidth(true) retourne la largeur de l'élément (y compris la marge interne, le bord et la marge externe).

La méthode outerHeight(true) retourne la hauteur de l'élément (y compris la marge interne, le bord et la marge externe).

Exemple

$("button").click(function(){
  var txt="";
  txt += "Largeur extérieure (+marge): " + $("#div1").outerWidth(true) + "</br>";
  txt += "Hauteur extérieure (+marge): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
);

Essayez-le vous-même

jQuery - Plus de width() et height()

L'exemple suivant retourne la largeur et la hauteur du document (document HTML) et de la fenêtre (vue portail du navigateur) :

Exemple

$("button").click(function(){
  var txt="";
  txt += "Largeur/hauteur du document: " + $(document).width();
  txt += "x" + $(document).height() + "\n";
  txt += "Largeur/hauteur de la fenêtre: " + $(window).width();
  txt += "x" + $(window).height();
  alert(txt);
);

Essayez-le vous-même

L'exemple suivant définit la largeur et la hauteur d'un élément <div> spécifié :

Exemple

$("button").click(function(){
  $("#div1").width(500).height(500);
);

Essayez-le vous-même

Manuel de référence jQuery CSS

Pour une référence complète sur jQuery Dimensions, veuillez consulter notre manuel de référence jQuery Dimensions.