11546 sujets

JavaScript, DOM et API Web HTML5

Modifier la hauteur d'un div

Bonjour

Je souhaiterais modifier la hauteur d'un div : Si il fait 200px de haut, sa valeur initiale, un clic doit lui donner une taille de 30px. Et inversement, si il fait 30 px, sa hauteur doit repasser à 200px.

Je ne comprend pas ce qui cloche dans mon code. Je ne code habituellement pas en JS, je me suis aidé de la doc :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title></title>

<style type="text/css">
#block1 {
width: 200px;
height: 200px;
background: #000;
}
</style>

<script type="text/javascript">
function plus(cible) {
	if(document.getElementById) {
		if (var x != 30) {
			var x = 30;
		}
		else {
			var x = 200;
		}
		document.getElementById(cible).style.height = var x;
	}
}
</script>


	</head>
	<body>
<div id="block1" onclick="plus('block1');">
	
</div>
	</body>
</html>
gaylover a écrit :
ptet juste mettre x et pas var x comme assignement... Smiley cligne 



function plus(cible) {
	if(document.getElementById) {
		if (x != 30) {
			x = 30;
		}
		else {
			x = 200;
		}
		document.getElementById(cible).style.height = var x;
	}
}


Comme ceci ?
Salut supercanard,
supercanard a écrit :
function plus(cible) {
	if(document.getElementById) {
		if (x != 30) {
			x = 30;
		}
		else {
			x = 200;
		}
		document.getElementById(cible).style.height = var x;
	}
}
var est un mot clé qui te permet de créer des variables locales. Le fait de placer le mot clé dans l'assignation est une erreur de syntaxe. De plus, tu ne peux créer qu'une fois la même variable dans la fonction/boucle en cours :

function plus(cible) {
	var x;
	if(document.getElementById) {
		if (x != 30) {
			x = 30;
		}
		else {
			x = 200;
		}
		// erreur de syntax
		document.getElementById(cible).style.height = [b]var[/b] x; 
	}
}

Sinon, essai plutôt ceci :
<script type="text/javascript">
	function plus(el) {
		el.style.height = parseInt(el.style.height) == 200 ? '30px': '200px';
	}
</script>

<div onclick="plus(this);" style="background: blue;">blabla</div>


Enfin, pour un code beaucoup plus fléxible, je te propose de te pencher sur ces propriétés: offsetWidth et offsetHeight (faut chercher un peu)

Bon courage
Merci pour l'explication ^^
je vais regarder pour les 2 autres alternatives une fois que j'aurais réussi à faire marcher celle là

Je crois que j'ai aussi un autre problème : Lors de l'appel de la fonction la variable x est vide, ce qui explique peut être que ça ne fonctionne pas...
Je ne sais pas si comme en PHP on peut faire : if (empty x)) { x= 200 }


<script type="text/javascript">
function plus(cible) {
	var x;
	if(document.getElementById) {
		if (x != 30) {
			x = 30;
		}
		else {
			x = 200;
		}
		document.getElementById(cible).style.height = x'px';
	}
}
</script>
salut,

je vois deux ou trois ptite chose bizar (je n'ai pas testé et je ne suis pas expert js jai comencé récemment) :

la condition de ton if : si tu lui fait getElementbyID sans lui donné d'id je pense pas que tu va rentrer souvent dans ton if..

et pour ta concatenation :x+'px';

voila si ca peut t'aider^^ et surtout n'hesite pas à utiliser la console de debug de firefox!
Merci j'ai corrigé Smiley smile

Mais quelquechose cloche encore... Au premier clic mon block diminu bien à 30px, car x n'est pas egal a 30, il n'existe même pas.
Au deuxième clic, rein ne se passe. Pourtant dans le if je lui assigne bien 30px, donc il devrais se retrouver à 200 (else) Smiley confus

A moins que une fois la fonction exécuté la variable x disparaissent ?
tout a fait x est une variable locale donc une fois que ta fonction est "finie" il disparait.

Donc au moment de ta definition de variable assigne lui ton height :

var x=document.getElementByID(cible).height;


ou essaye avec offsetHeight
Je me permet de rajouter style devant height.
Ton idée me parait logique mais ça ne marche toujours pas (avec ou sans style devant height)
Cette fois rien ne se passe au clic.

<script type="text/javascript">
function plus(cible) {
	var x = document.getElementByID(cible).style.height;
	if(document.getElementById(cible)) {
		if (x != 30) {
			x = 30;
		}
		else {
			x = 200;
		}
		document.getElementById(cible).style.height = x+'px';
	}
}
</script>
oui pardon javais oublié le .style .

il ne se passe rien parce que il faut ke tu lui donne une condition dans le if :

si x=30 alors x=200 sinon x=30
Parce que la propriété style.height est de type String et contient, si elle est définie, l'unité de mesure (px, pt, em, ...). Tu auras donc: "30px" ou "200px".

Si tu veux continuer à tester des valeurs numériques (recommandé), fais une conversion explicite grâce à parseInt :

var x = parseInt(document.getElementByID(cible).style.height);

*edit: attention toutefois, si la fonction document.getElementByID te renvoie null, il faut prévoir le comportement.
Modifié par Ze Nenex (02 Nov 2007 - 16:09)
Merci pour votre aide
Je commence à comprendre ça y est Smiley biggrin

Ceci dit ça ne marche toujours pas. Pourtant cette fois je fait bien la convertion et il y a bien une condition dans mon if ? ( Serial je n'ai pas compris a ce propos ce que tu voulais dire)

<script type="text/javascript">
function plus(cible) {
	var x = parseInt(document.getElementByID(cible).style.height);
	if(document.getElementById(cible)) {
		if (x == 30) {
			x = 200;
		}
		else {
			x = 30;
		}
		document.getElementById(cible).style.height = x+'px';
	}
}
</script>
la ton if test just si ton element existe alors kil faudrait que tu test aussi par rapport a la valeur du height de ton élément

si maLargeur=30 alors je lui done la valeur 200 sinon je lui done la valeur 30

c'est plus clair?
serial a écrit :
la ton if test just si ton element existe alors kil faudrait que tu test aussi par rapport a la valeur du height de ton élément

si maLargeur=30 alors je lui done la valeur 200 sinon je lui done la valeur 30

c'est plus clair?


Ah tu parle de cellui-là.

Oui mais regarde, en fait je teste si l'élément existe.
Si il existe c'est là que je teste si la valeur est egal a 30.
Car si l'element n'existe pas ça sert à rien de tester la valeur

Non ? du coup j'ai un doute là
Smiley confus
arf oui pardon j'avais mal lu ton code^^ autant pour moi!

dans ce cas la test si l'element existe avant de recup sa largeur Smiley cligne

de plus la methode est : getElementById (different de D)
Petit problème de copier coller avec une ligne dans un post plus haut,
mea culpa. Il faut un "d" minuscule à la fonction getElementById

supercanard a écrit :

...
var x = parseInt(document.getElementByI[b]D[/b](cible).style.height);
...


Pour tester ton code tu as en gros 2 possibilités qui s'offrent à toi:
- faire des alert :
var x = parseInt(document.getElementById(cible).style.height);
alert(x);

- Utiliser firebug et/ou IE Developper Toolbar
Sujet clos
Aller à