11544 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Récupérer la largeur et la hauteur d'un élément

Bonsoir.

Est-il possible de récupérer en javascript la largeur et la hauteur d'un élément?

Dans mon cas, il s'agit d'une img, mais dont la source est changée en javascript. J'ai en fait simplement des images horizontales et verticales, et j'aimerais pouvoir, au moment où je change la source par javascript, détecter si elle a changé de sens.

Merci beaucoup.
Modifié par <nicolas> (06 Sep 2007 - 09:46)
Bonsoir.

Je n'ai pas bien compris ton problème mais "element.offsetHeight" et "element.offsetWidth" devraient faire ton bonheur.
En fait le problème, c'est de pouvoir récupérer les valeurs de la nouvelle image, celle chargée par le javascript.

Pour l'instant, au clic sur un lien, j'ai
mon_image.src = 'ma_2e_image.jpg';
var height = mon_image.offsetHeight;
var width = mon_image.offsetWidth;


Mais il me récupère les dimensions de l'image d'avant.
Bonjour,

N'ayant pas de réponses depuis la semaine dernière et vu que je n'ai toujours pas trouvé de solutions, je vais peut-être repréciser mon problème.

J'ai donc créé une galerie en JavaScript qui change juste la source et l'attribut de l'image. Cela m'évite de recharger la page à chaque photo.

Mais je cherche maintenant un moyen de changer la classe de l'image, en fonction de si elle est verticale ou horizontale.

J'ai essayé avec un onload sur l'image, mais le problème et que lorsqu'on affiche la même image pour la 2e fois, elle ne se recharge pas réélement, et donc ma fonction n'est pas exécutée.

Est-ce que quelqu'un voit une solution?
Peut-être en préchargeant l'image ?

var im = new Image();
im.onload = function () {
var o = document.getElementById('mon_img');
o.src = im.src;
o.width = im.width;
o.height = im.height;
o.style.width = im.width +'px';
o.style.height = im.height +'px';
};
im.src = "test.jpg";

N.B. Ce code a été écrit en direct dans la textbox de réponse et n'a par conséquent pas été testé.
Salut,

peut etre que ca pourrait ressembler à ca :

var monImage = document.getElementById('monImage');

//On change l'image
monImage.src = 'image2.jpg';

//On remet l'image chargée à ses dimensions originales
monImage.style.width = 'auto';
monImage.style.height = 'auto';

//On teste la hauteur et la largeur et on change le nom de la classe
monImage.className = (monImage.offsetHeight > monImage.offsetWidth) ? 'imageVerticale' : 'imageHorizontale';


A mon avis quand tu changes le "src" de l'image, il garde les dimensions de la précédente, du coup impossible de tester réellement la taille des images. Il faut remettre l'image à ses dimensions originales avant de faire le test...
J'ai finalement utilisé php pour faire la vérification. (En fait je la faisais déjà mais seulement pour les vignettes.) Et ensuite JavaScript ne fait que récupérer la classe de la vignette pour la transmettre à l'image.

Merci quand même.
Sujet clos
Aller à