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.