Discussion :

[Periah]

Bonjour,

Je souhaite récupérer via javascript la hauteur et la largeur d'une div dynamique qui peut contenir soit du texte, soit une image, soit les deux.

Si la div ne contient que du texte, pas de problème, j'y arrive en utilisant clientWidth et clientHeight. Par contre, si la div contient une image, cela ne fonctionne plus (sous Firefox) et je ne récupère que la taille du texte (ou 0 s'il n'y a pas de texte). En allant inspecter la div sous Firebug, les valeurs sont correctes...

Tout fonctionne correctement avec IE et Chrome.

Comment faire pour récupérer la taille réelle de la div?

Pour illustrer tout ça, le bout de code qui génère la div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var lDiv = document.createElement('div');
 
document.body.appendChild(lDiv) ;
 
lDiv.style.backgroundColor = "red" ;
 
lDiv.style.position = "absolute" ;
lDiv.style.left = "500px" ;
lDiv.style.top = "500px" ;
 
lDiv.innerHTML = '<SPAN style="text-align:left">Vanessa Cortia<BR/><IMG src="./Images/vanessa_cortia.jpg" /><BR />DSI/SEDI</SPAN>' ;
 
var lResult = {
	width: lDiv.clientWidth,
	height: lDiv.clientHeight
}
 
trace(true, "offset : " + lDiv.offsetWidth + " / " + lDiv.offsetHeight, "red" ) ;
trace(true, "direct : " + lDiv.width + " / " + lDiv.height, "red" ) ;
trace(true, "client : " + lDiv.clientWidth + " / " + lDiv.clientHeight, "red" ) ;
trace(true, "style : " + lDiv.style.width + " / " + lDiv.style.height, "red" ) ;
trace(true, "inner : " + lDiv.innerWidth + " / " + lDiv.innerHeight, "red" ) ;
trace(true, "inner : " + lDiv.scrollWidth + " / " + lDiv.scrollHeight, "red" ) ;

La fonction trace se contente d'afficher les valeurs sur la div de fond de page.

Merci d'avance.

[Bovino]

Attends que l'image ait été chargée avant d'en demander les dimensions.

[Periah]

Forcément, dit comme ça, ça parait évident...

Mais ça m'amène à un autre problème : mon petit bout de code de toute à l'heure est une fonction qui vise à donner la taille affichée d'un bloc HTML (qui est normalement variable et non pas figé comme dans mon exemple).

La taille renvoyée servant à définir d'autres div qui s'articulent autour.

Dans cette optique, il faut que je puisse renvoyer mon lResult correct (et avec la taille de l'image) en fin de fonction. Comment puis-je faire pour attendre que l'image se charge et comment puis-je savoir qu'elle est chargée?

[Bovino]

Deux solutions.
1) Attendre le chargement de l'image (événement onload de la balise <img />).
Le problème est que cet événement sera appelé de façon asynchrone et va t'obliger à revoir la structure de ton code.

2) Indiquer les dimensions de l'image dans le code soit en CSS soit à l'aide des attributs width et height.

[Periah]

J'ai mis en place la solution 2.

Ca fonctionne parfaitement. Merci!