Avec jQuery, il est facile de travailler avec les dimensions des éléments et la fenêtre du navigateur.
jQuery Méthodes Dimension
jQuery a plusieurs méthodes importantes pour travailler avec les dimensions:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery Dimensions
jQuery width() et height() Méthodes
Les width() ensembles de méthode ou retourne la largeur d'un élément (exclut padding, border et margin ).
Les height() ensembles de méthode ou retourne la hauteur d'un élément (exclut padding, border et margin ).
L'exemple suivant renvoie la largeur et la hauteur d'un spécifié <div> élément:
Exemple
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
}); Essayez - le vous - même » jQuery innerWidth() et innerHeight() Méthodes
Le innerWidth() méthode renvoie la largeur d'un élément (comprend le padding ).
Le innerHeight() méthode renvoie la hauteur d'un élément (comprend le padding ).
L'exemple suivant renvoie le centre-largeur / hauteur d'une spécifiée <div> élément:
Exemple
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
}); Essayez - le vous - même » jQuery outerWidth() et outerHeight() Méthodes
Le outerWidth() méthode renvoie la largeur d'un élément (comprend le padding et la border ).
Le outerHeight() méthode renvoie la hauteur d'un élément (comprend le padding et la border ).
L'exemple suivant retourne le / la hauteur extérieure de largeur d'un spécifié <div> élément:
Exemple
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
}); Essayez - le vous - même » Le outerWidth(true) méthode renvoie la largeur d'un élément (comprend padding, border , et la margin ).
Le outerHeight(true) méthode renvoie la hauteur d'un élément (comprend padding, border , et la margin ).
Exemple
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
}); Essayez - le vous - même » jQuery Plus width() et height()
L'exemple suivant renvoie la largeur et la hauteur du document (le document HTML) et 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);
}); Essayez - le vous - même » L'exemple suivant définit la largeur et la hauteur d'un spécifié <div> élément:
Exemple
$("button").click(function(){
$("#div1").width(500).height(500);
}); Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »
jQuery CSS Référence
Pour un aperçu complet de toutes les méthodes jQuery CSS, s'il vous plaît visitez notre jQuery HTML / CSS Référence .