jQuery - Dimensions
Avec jQuery, il est facile de travailler avec les dimensions des éléments et la fenêtre du navigateur.
Méthodes de dimension jQuery
jQuery propose plusieurs méthodes importantes pour travailler avec les dimensions :
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
Dimensions jQuery
Méthodes jQuery width() et height()
La width()méthode définit ou renvoie la largeur d'un élément (exclut le rembourrage, la bordure et la marge).
La height()méthode définit ou renvoie la hauteur d'un élément (exclut le rembourrage, la bordure et la marge).
<div>
L'exemple suivant renvoie la largeur et la hauteur d'un élément spécifié :
Exemple
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
Méthodes jQuery innerWidth() et innerHeight()
La innerWidth()méthode renvoie la largeur d'un élément (comprend le rembourrage).
La innerHeight()méthode renvoie la hauteur d'un élément (y compris le rembourrage).
L'exemple suivant renvoie la largeur/hauteur intérieure d'un <div>
élément spécifié :
Exemple
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
Méthodes jQuery outerWidth() et outerHeight()
La outerWidth()méthode renvoie la largeur d'un élément (y compris le rembourrage et la bordure).
La outerHeight()méthode renvoie la hauteur d'un élément (y compris le rembourrage et la bordure).
L'exemple suivant renvoie la largeur/hauteur extérieure d'un <div>
élément spécifié :
Exemple
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
La outerWidth(true)méthode renvoie la largeur d'un élément (y compris le rembourrage, la bordure et la marge).
La outerHeight(true)méthode renvoie la hauteur d'un élément (y compris le rembourrage, la bordure et la marge).
Exemple
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery Plus largeur() et hauteur()
L'exemple suivant renvoie la largeur et la hauteur du document (le document HTML) et de la fenêtre (la fenêtre du navigateur) :
Exemple
$("button").click(function(){
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += "x" + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
<div>
L'exemple suivant définit la largeur et la hauteur d'un élément spécifié :
Exemple
$("button").click(function(){
$("#div1").width(500).height(500);
});
Exercices jQuery
Référence CSS jQuery
Pour un aperçu complet de toutes les méthodes CSS jQuery, veuillez consulter notre référence jQuery HTML/CSS .