Modifier les définition CSS - Modifier dynamiquent la hauteur d'une page

Version imprimable

Bonjour, :)
J'ai une page avec des définitions CSS. Ces définitions sont dans un fichier admin.css
Code:

1 2 <link rel="stylesheet" type="text/css" href="admin.css">
Voici ma page de test.

Cette page contient un tableau où on peut rajouter des lignes. Il suffit de cliquer sur "add".
Si vous cliquer 5 fois sur le bouton par exemple, la présentation de la page laisse à désirer.
Je souhaite donc modifier ma fonction de rajout de ligne de telle sorte qu'elle augmente la taille de ma page, la taille d'un bloc.
Ce bloc est identifié par l'id = bloc_contenu_formulaire_etage2_provider dont la définition est ci-dessous :
Code:

1 2 3 4 5 6 7 /* Formulaire Reservation_etape2 */ #bloc_contenu_formulaire_etage2_provider { border: 1px solid black; height: 660px; background-color: yellow; }
Avant de chercher à modifier la taille, j'ai inclus dans ma fonction d'ajout de ligne les instructions suivantes, histoire de vérifier que j'arrivais bien à obtenir la définition de mon bloc :
Code:

1 2 3 4 5 6 ... var hauteur_du_formulaire = document.getElementById("bloc_contenu_formulaire_etage2_provider"); var toto = hauteur_du_formulaire.style.height; alert ('hauteur_du_formulaire :'+toto); ...
Et malheureusement, cela ne donne rien ... :(

Comment faire ?

PS : j'ai déjà cherché sur le forum et sur le net, tester x codes, mais ...
donc soyez svp indulgent.

essaie ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
	<div id="test" style="height: 100px; width: 100px; background-color: red;"></div>
	<div id="divTest" style="position: absolute; top: 10px; left: 10px; height: 20px; width: 100px; background-color: yellow;"></div>
	<input type="button" value="add" onclick="add();"/>
	<script>
		function add(){
			var hElem = parseInt(document.getElementById("divTest").style.height);
			var hFond = parseInt(document.getElementById("test").style.height);
 
			var newHElem = hElem+20;
			var newHFond = hFond;
			if (newHElem > 90)
				newHFond = hFond+20;
 
			document.getElementById("divTest").style.height = newHElem+"px";
			document.getElementById("test").style.height = newHFond+"px";
		}
	</script>
</body>

hum htr999 : intéressant

J'en étais à :

Code:

1
2
3
4
5
6
7
8
 
	var hauteur_du_formulaire = document.getElementById("bloc_contenu_formulaire_etage2_provider").offsetHeight;
	alert ('hauteur_du_formulaire :'+hauteur_du_formulaire);
	var ajout_hauteur_du_formulaire = 20 ;
	alert ('ajout_hauteur_du_formulaire:' +ajout_hauteur_du_formulaire);
	var nouvelle_hauteur = hauteur_du_formulaire + ajout_hauteur_du_formulaire;
	alert ('nouvelle_hauteur_du_formulaire:'+nouvelle_hauteur);
	document.getElementById("bloc_contenu_formulaire_etage2_provider").style.height=nouvelle_hauteur+"px";

qui fonctionne sous FF mais pas sous IE la preuve.

J'ai testé ton code : super !
mais pour quoi cela ne fonctionne pas chez moi ...

Code:

1
2
3
4
5
6
7
8
9
 
var hauteur_du_formulaire = parseInt(document.getElementById("bloc_contenu_formulaire_etage2_provider").style.height);
 
	alert ('hauteur_du_formulaire :'+hauteur_du_formulaire);
	var ajout_hauteur_du_formulaire = 20 ;
	alert ('ajout_hauteur_du_formulaire:' +ajout_hauteur_du_formulaire);
	var nouvelle_hauteur = hauteur_du_formulaire + ajout_hauteur_du_formulaire;
	alert ('nouvelle_hauteur_du_formulaire:'+nouvelle_hauteur);
	document.getElementById("bloc_contenu_formulaire_etage2_provider").style.height=nouvelle_hauteur+"px";

soit la page de test suivante

????

31/05/2008, 19h31
SpaceFrog

pour que ce soit crossbrowser les prorpiétés doivent comporter l'unité (px, em, % ... ) sauf si la valeur est 0

donc lorsque tu définis une hauteur

Code:

+"px"

à la fin