Taille et positionnement d'une boîte HTML

Faut-il rappeler que les dimensions d'une boîte HTML peuvent être passées en valeurs d'attributs (... width ="400") ou en valeurs de propriétés CSS (... style = "width : 400px; ...").
Quant au positionnement les boîtes peuvent être dans le flux ou positionné en fixe, relatif ou absolu.

Récupérer les dimensions : solution déjà abordée

La méthode css ou attr argumentée avec width ou height permet à priori de récupérer la taille d'un élément.
Rappelons cette technique avec un exemple et montrons aussi les pièges de cette solution.

Le code CSS, HTML et Jquery de l'exemple

<style> img{display : block ; margin :10px auto 10px auto ; width : 30% ; } ... <body> <p class ="remarque">Cliquez sur l'une des images pour connaître sa largeur et sa hauteur ! <img src ="../images/bikini.jpg" /> <img src ="../images/trikini.jpg" /> <script> $("img").click(function() { var largeur = $(this).css("width"); alert("largeur image :" + largeur); var largeur =$(this).attr("height"); alert("hauteur image :" + largeur); var largeur =$(this).css("height"); alert("hauteur image :" + largeur); }); ...

Notez que dans le cadre d'un "site adaptatif" la largeur de chaque image exprimée en % dans une règle de style CSS !

Ce script contient une erreur !

Lors d'un clic sur une des deux images Les deux premières instructions retournent une dimension en pixels mais la troisième instruction retourne "undefined" ...
Et c'est logique car la largeur de chaque image est définie par une propriété CSS (et non pas par un attribut).
Donc la méthode attr() utilisée dans la troisième instruction n'est pas applicable dans ce contexte !
C'est la méthode css() qui doit ici s'appliquer tant pour récupérer la largeur que la hauteur.
Testez l'exemple buggé !

Nouvelles méthodes pour récupérer/modifier les dimensions d'un élément

Pour récupérer les dimensions d'un élément HTML il est possible d'utiliser les méthodes jQuery width() et height().

Ces méthodes peuvent être utilisées que les dimensions aient été passées en valeurs d'attributs ou en valeurs de propriétés CSS. De plus ces deux méthodes retournent toujours un numérique alors que les méthodes attr(), css() argumentées avec width, height retournent toujours une donnée de type string.

Le code CSS et HTML de l'exemple

<style> #boite {width : 100px ; height : 100px; background : lime ; } ... <p>Cliquez sur l'image / la boîte pour l'agrandir</p> <img width = "35" height ="50" src ="../images/trikini.jpg" /> <div id ="boite"></div> ...

Notez que les dimensions initiales de la boîte verte identifiée "boite" sont définies par le CSS alors que les dimensions initiales de l'image sont passées en valeurs d'attributs.

Le script

var X = $("img").width() ; var Y = $("img").height(); alert("dimensions initiales image : "+ X + " " + Y) ; alert("type : " + typeof(X)); var XB = $("#boite").width() ; var YB = $("#boite").height(); alert("dimensions initiales boîte verte : "+ XB + " " + YB) ; alert("type : " + typeof(XB)); $("img").click(function() { X +=35 ; Y +=50 ; $(this).width(X); $(this).height(Y); }); $("#boite").click(function() { XB +=50 ; YB +=50 ; $(this).width(XB); $(this).height(YB); });

HTML & CSS : les dimensions de la boîte identifiée boite sont définies avec des propriétés CSS alors que la taille de l'image découle d'attributs !

Via ce script, je vous montre aussi que les méthodes width() et height sont aussi "getters" et "setters". C'est à dire qu'elles permettent non seulement de récupérer mais aussi de modifier les dimensions d'un élément.
Donc utilisez ces méthodes sans aucune modération (lol) !
Essayez ce code !

Autres méthodes jQuery relatives aux dimensions

Une boîte peut avoir une largeur totale beaucoup plus grande que sa largeur définie par le width.
Faut-il rappeler que la largeur totale d'une boîte est obtenue en ajoutant au "width" les marges internes gauche et droite, les marges externes gauche et droite et les bordures gauche et droite.

Le code CSS et HTML de l'exemple

... <style> div { margin : 10px ; padding : 5px ; border :1px solid black; } #boite1 {width : 15% ; height :120px ; background : lime ; } #boite2 {width : 30% ; height : 100px ; background : yellow ; } ... <body> <p class ="remarque">Cliquez sur l'une des deux boites pour avoir des infos sur ses dimensions. <div id ="boite1">Boîte 1</div> <div id="boite2">Boîte 2</div> ...

Les dimensions des boîtes DIV sont passées en propriétés CSS.
La largeur de chaque boîte exprimée en %.
Notez la bordure de 1px, la marge interne (padding) de 5px et la marge externe (margin) de 10px pour chaque boîte DIV.

Le script

$("div").click(function() { var info = $(this).width() ; alert("largeur interne de la boîte : " +info); info = $(this).innerWidth() ; alert("largeur interne de la boîte+ marges interne gauche et droite : " +info); info = $(this).outerWidth() ; alert("largeur interne de la boîte+ marges interne gauche et droite + bordure : " +info); info = $(this).outerWidth(true) ; alert("largeur totale de la boîte : " +info); }) ;

Ici innerWidth retourne 10 (2 fois 5) de plus que width.
outerWidth() retourne 2 (2 fois 1) de plus que innerWidth.
outerWidth(true) retourne 20 (2 fois 10) de plus que outerWidth().


Testez le code ci-dessus !

Attention les infos retournées sont exprimées en pixels alors que la largeur de chaque boîte est exprimée en % de la largeur de BODY (qui lui même est fonction de la largeur de la fenêtre). Donc les infos retournées sont fonction de la largeur de la fenêtre.

Récupérer la position d'une élément

Première technique

Utilisez la méthode css argumentée avec top ou left.

Le code de l'exemple ci-dessous :

... <style> body {position : relative ; } img{display : block ; width : 20%;} img.flux {margin : 10px auto 10px auto ; } img.relatif {position : relative ; top : 50px ; left :50px ; } img.absolu {position : absolute ; top : 100px ; left : 10px ; } img.fixe {position : fixed ; top : 200px ; left : 60px ; } </style> </head> <body> <p>En survolant chaque image vous apprennez le mode de positionnement. <p class ="remarque">Cliquez sur une image pour obtenir sa position ! <img src ="../images/trikini.jpg" class ="flux" title ="image dans le flux"/> <img src ="../images/brune_nue.jpg" class ="relatif" title ="image en relatif" /> <img src ="../images/jolie_fille.jpg" class ="absolu" title ="image en absolu" /> <img src ="../images/seins_nus.jpg" class ="fixe" title ="image en fixe" /> <script> $("img").click(function() { var x = $(this).css("left"); var y =$(this).css("top"); alert("position de l'image : " + x + " " + y); }); ...

Le script retourne le "left" et le "top" de chaque image.
Testez le code !

Ces informations ne sont pas très exploitables !
C'est seulement pour l'image positionnée en fixe que les résultats indiquent la position par rapport au coin haut gauche de la fenêtre.
Pour les autres images c'est la position par rapport à la boîte parente (position : absolute) ou "auto auto" (position dans le flux) ou le décalage par rapport au positionnement dans le flux(position :relative).

Deuxième technique : méthode offset

Le code CSS et HTML est strictement identique !
Le script :

$("img").click(function()
{
	var x = $(this).offset().left;
	var y =$(this).offset().top;
	alert("position de cette image dans l'écran : " + x + " " + y); 
});

Essayez avec la méthode offset

Pour chaque image on récupère sa position par rapport au coin haut gauche de la fenêtre !

N'hésitez pas à réduire la fenêtre pour constater la variation des coordonnées (sauf pour l'image positionnée en fixe).

Le positionnement : déplacer les objets

Je vais vous montrer que la méthode offset est non seulement "getters" mais aussi "setters".
Rappel : ces deux termes sont d'horribles anglicismes pour indiquer qu'une méthode permet non seulement de récupérer la valeur d'un paramètre (to get = obtenir) mais de le modifier (to set : modifier).
Donc je peux déplacer l'objet courant avec la méthode offset.

Le code CSS & HTML de la page est identique à celui de l'exemple précédent.
Seul change le script !

$("img").click(function() { var x = $(this).offset().left; var y = $(this).offset().top; x= x+50 ; y = y+50 ; $(this).offset({left: x , top : y}); });

Notez la notation JSON pour paramétrer la méthode offset en mode "setters".
Amusez vous à déplacer les images !

La méthode position()

Je n'évoquerai pas la méthode position() car cette méthode n'est que "getters" et elle retourne des infos exploitables uniquement si la boîte est positionnée en absolu (position par rapport au conteneur ou fenêtre) ou fixe (position par rapport à la fenêtre).
Retour menu