Discussion :

[Coocky10]

Bonjour � tous,

J'ai une question sur l'utilsation de l'offesetHeight.

Ce qui me perturbe c'est que pour ce code :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById("AptiListe3").offsetHeight;

Suivant l'endroit de mon code ou je l'utilise je n'ai pas toujours le m�me r�sultat.

Mon div "AptiListe3" contient une simple liste "<ul>" avec deux �lement "<li>", je ne touche jamais � la taille de cet �l�ment, je cherche � r�cup�rer la hauteur de cette liste pour ajuster mes autres div autour, mais malheureusement le offsetHeight me retourne 104 au moment ou j'ai besoin de savoir sa hauteur, et il me retourne 68 (ce qui est finalement la bonne valeur) � la fin de mon code (quand c'est trop tard).

J'ai d�j� remarquer ce probl�me pour un autre �l�ment et j'avais cru comprendre qu'il s'agissait d'un probl�me de temps et qu'il fallait utilis� un setTimeout, cela avait march�, mais j'ai de nouveau ce probl�me et j'avoue que ne comprend tr�s bien ce qui se passe.

Si quelqu'un pouvait m'aider merci.

[-Rpass-]

offsetHeight prend en compte la lise d�roulante les bordures etc, donc si au moment ou tu l'utilises la mise en page bouge, la valeur de offsetHeight aussi

[Coocky10]

Merci du coup quelle fonction serait plus adapt� afin de me retourner la hauteur de ma liste ? sans liste d�roulante, sans bordures etc..

[Coocky10]

Bien alors du coup si j'utilise

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
document.getElementById("AptiListe3").clientHeight;
//ou
document.getElementById("AptiListe3").scrollHeight;

Au lieu de 104 au milieu du code j'ai 102 et � la fin j'ai 66 � la place de 68, logique les pixels de mes bordure du haut et du bas de 1px chacune. Mais cela ne change rien � mon probl�me, ma liste doit �tre de 66 ou 68 avec les bordures mais jamais la hauteur devrait �tre de 102 ou 104.

[NoSmoking]

Bonjour,
pour pouvoir t'aider efficacement, il nous manque le contexte, � quel moment lis tu la taille de la <div>, en tout �tat de cause cela devrait �tre r�alis� une fois le DOM form� et le CSS appliqu�.

[Coocky10]

bonjour NoSmoking

Le contexte est un peu compliqu�, disons pour faire simple que je cherche � cr�er des div par param�tre.
donc j'ai une premi�re fonction qui d�finit tout les div � creer dont voici un exemple.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
ObjGeo.ObjSprite = {"ID":"AptiListe", "Parent": "Div_Center",  "AlignEnfant":"Center-Width", "Taille":"100%/Auto"};
ObjGeo.ObjFond = {"backgroundColor":"white"};
Cre_Obj(ObjGeo);
ObjGeo = {};

Ensuite avec la fonction Cre_Obj

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
24
25
26
27
	function Cre_Obj(ObjGeo)
	{
		var DivCre;
		for(var i in ObjGeo)
		{		
			switch(i)
			{
				case "ObjSprite":
					DivCre = Cre_DIV(ObjGeo[i]);
					DivCre.style.display = "inline-block";
					DivCre.style.position = "absolute";
				break;
				case "Contenu":
					AjoutContenu(DivCre, ObjGeo[i]);
				break;
				case "ObjBord":
					Affect_Bords(DivCre, ObjGeo[i]);
				break;
				case "ObjFond":
					Affect_Fond(DivCre, ObjGeo[i]);
				break;
				case "Font":
					Affect_Font(DivCre, ObjGeo[i]);
				default:
			}
		}	
	}

Donc j'ai plusieurs fonction dont Cre_DIV qui creer un 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
 
	function Cre_DIV(ObjDiv)
	{
		var sp1 = document.createElement("div");
 
		for(var i in ObjDiv)
		{
			sp1.setAttribute(i, ObjDiv[i]);
		}
 
		var sp2 = document.getElementById(ObjDiv.Parent);
		sp2.appendChild(sp1);	
		return sp1;
	}

A ce moment le DOM est form�, ensuite les fonction AjoutContenu (ajoute un contenu avec innerHTML), Affect_Bords, Affect_Fond, Affect_Font forme la partie CSS (avec par exemple Div.style.borderStyle = Parametres[i] etc..)

Ensuite je fait une boucle pour relire tout les DIV et leur affecter leur taille Div.style.height = Hauteur + unit et Div.style.width = Largeur + unit;

Puis je fait une nouvelle boucle pour relire tout les DIV et leur affecter leur position (qui peut d�pendre de la taille des objets pr�c�demment affect�s).

C'est � l'int�rieur de cette boucle que valeur offsetHeight du DIV "AptiListe3" n'est pas bonne, par contre une fois la boucle termin�e quand je relis l'offsetHeight du m�me �l�ment il est bon, par contre je ne change ni n'affecte la taille du DIV "AptiListe3", j'ai juste besoin de savoir sa hauteur pour affecter la taille du div parent, sa valeur devrait donc �tre toujours la m�me et ceci m�me si j'ai cr�er d'autre DIV entre temps non ?

[danielhagnoul]

Puis je fait une nouvelle boucle pour relire tout les DIV et leur affecter leur position (qui peut d�pendre de la taille des objets pr�c�demment affect�s).

C'est � l'int�rieur de cette boucle que valeur offsetHeight du DIV "AptiListe3" n'est pas bonne,

par contre une fois la boucle termin�e quand je relis l'offsetHeight du m�me �l�ment il est bon

,

La boucle modifie le DOM, donc le r�sultat obtenu est logique !

[Coocky10]

la boucle pour positionner mes div affecte le taille d'un div que je ne modifie pas et c'est logique, alors c'est une logique qui m'�chappe.

la boucle pour positionner mes div utilise

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
Div.style.left
Div.style.right
Div.style.top
Div.style.bottom

en quoi ces valeurs affecte la taille d'un �l�ment.

[NoSmoking]

Je trouve quand m�me ta m�thode un peu compliqu�e mais sans en voir l'utilit� et le r�sultat final difficile d'�tre cat�gorique, il me semble qu'il doit y avoir plus simple sur base de template par exemple.

Le fait de positionner des �l�ments en absolute puis de modifier leurs propri�t�s top, right...left influe directement sur leur taille, c'est d'ailleurs une m�thode efficace pour dimensionner un tel �l�ment � 100% de son parent sans subir les foudres des padding ou autre border.

[Coocky10]

Il me semble que les propri�t�s display et position sont �galement compliqu�es � exploiter pour des fonctions simple comme un centrage horizontale.

Du coup quand je veux centrer horizontalement 4 �l�ments dans un DIV je r�cup�re la longueur total de DIV parent, je r�cup�re la longueur de chaque DIV enfant et je d�termine par calcul la positon de chaque �l�ment afin que l'ensemble des DIV soit centr�s �quitablement.
Et sur le d�but de mon code cela marche bien.

Du coup je souhaite faire pareil verticalement mais tout ceci ne peut fonctionner qu'� condition bien sur d'avoir les bonnes valeurs de taille de chaque �l�ment.

Sauf que je me rend compte que de r�cup�rer simplement la taille d'un �l�ment qui d�pendrait de sa position ne pas parait pas logique et simple non plus.