Passer en parametre l'attribut CSS � une fonction

Version imprimable

16/08/2008, 15h38
Cdic83

Passer en parametre l'attribut CSS � une fonction
Bonjour,
je suis entraint de me faire une bibliotheque d'effects javascript et j'aimerais pouvoir passer a ma fonction la balise CSS que je souhaite modifier � un �l�ment du genre :
Code:

1 2 3 4 5 SetValue(element,balise,valeurFinale,mesure) { var myelement = document.getElementById(element); myelement.style.balise = valeurFinale + mesure ; :cry: }
L'appel de la fonction pourrait ressembler � ca :
SetValue('main','height',100,'px');

Mais h�las cela ne marche pas...

J'espere que quelqu'un pourra m'aider.

Merci d'avance

bonjour,

tu peux cr�er dynamiquement une fonction :

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<script type="text/javascript">
<!--
function SetValue(element,balise,valeurFinale,mesure)
{
  var myelement = document.getElementById(element);
  
  // création dynamique d'une fonction :
  var variablesFct = "el"; // variables de la fonction (element dont on modifie les attributs)
  var codeFct = "el.style."+balise+"="+"'"+valeurFinale+mesure+"';"; // code JS de la fonction
  
  alert("Code de la fonction : \n" + codeFct);
  var modifAttributs = new Function(variablesFct, codeFct); // définition de la fonction
  
  // appel de la fonction créée dynamiquement :
  modifAttributs(myelement);
  
}
 
//-->
</script>
 
</head>
 
<body>
 
<div id="ElementTest" style="border: 1px solid #000000; width: 200px">
bla bla bla bla bla bla
</div>
 
<br><br><br><br>
 
<input type="button" value="texte en rouge" onclick="SetValue('ElementTest','color','#FF0000','')" />
<input type="button" value="texte en gras"  onclick="SetValue('ElementTest','fontWeight','bold','')" />
<input type="button" value="hauteur = 200px"  onclick="SetValue('ElementTest','height','200','px')" />
 
 
 
</body>
</html>

17/08/2008, 19h00
Cdic83

Merci bien

Je te remercie pour ce code source,
cela permet de r�soudre mon impasse mais par contre je trouve ca etrange que l'on ne puisse aps faire un truc du genre

document.getElementById('toto').maproprietedynamque = mavaleurdynamique + monunitedynamique;

SI quelqu'un � une piste, je suis preneur, au moins pour ma culture g�n�rale.
Merci beaucoup
Cordialement
17/08/2008, 19h50
Auteur

Citation:

Envoy� par Cdic83

Je te remercie pour ce code source,
cela permet de r�soudre mon impasse mais par contre je trouve ca etrange que l'on ne puisse aps faire un truc du genre

document.getElementById('toto').maproprietedynamque = mavaleurdynamique + monunitedynamique;

tu peux �crire :

Code:

document.getElementById('toto').style.width = nlleValeur + unite;

sous condition que nlleValeur contienne une valeur num�rique (sous forme de chaine de caract�res ou d'entier) et que unite contienne une unit� valide (px, em, etc.). Cette �criture est juste car l'attribut width attend une valeur.

Maintenant il est logique que tu ne puisses pas �crire

Code:

document.getElementById('toto').style.attribut = "200px";

tout simplement car attribut n'est pas une propri�t� de l'objet style (qui d�pend lui m�me de l'objet retourn� par getElementById()). Le signe = signifie que tu affectes une valeur � une propri�t� qui est du code JS.

Dans l'exemple que je te donne, l'objet Function() (� ne pas confondre avec le mot-clef function) prend 2 param�tres :
- les arguments de la fonction ;
- le code de la fonction
sous forme de chaines de caract�res. Ce code :

Code:

var codeFct = "el.style."+balise+"="+"'"+valeurFinale+mesure+"';";

r�alise une concat�nation des diff�rents attributs (comme le montre le message alert()), puis lorsque j'appelle la fonction cette chaine est interpr�t�e comme du code JS, l'objet el �tant pass� en param�tre.

Je te remercie pour toutes ces explications.

Je touche presque mon but (desol� je suis relativement n�ophyte en javascript) mais il est vrai que ta m�thode est tres int�ressante.

j'ai quasiment fini la fonction que je souhaitais faire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
_DerouleDynamique:
					function( id, proprety, initValue, finalValue, mesure, interval)
					{
						var myelement = document.getElementById(id);
						if(!myelement) return;
 
						var variablesFct = 'el'; 
 
						var codeFct = 
						'if(typeof(' + initValue + ' || ' + finalValue + ' || ' + interval + ') != \'number\') return false;if(el.movement){ clearTimeout(el.movement)};if( !el.style.' + proprety + '){el.style.' + proprety + ' = parseInt(' + initValue + ')};var iDimY = parseInt(el.style.' + proprety + ');if(iDimY == ' + finalValue + '){ return true;}if(iDimY < ' + finalValue + '){var dist = Math.ceil((' + finalValue + ' - iDimY)/10);iDimY = iDimY + dist;}if(iDimY > ' + finalValue + '){var dist = Math.ceil((iDimY - ' + finalValue + ')/10);iDimY = iDimY - dist;}el.style.' + proprety + ' = iDimY +\'' + mesure + '\';var repeat = \"oO._DerouleDynamique(\'' + id + '\',\'' + proprety + '\', ' + initValue + ', ' + finalValue + ',' + mesure + ', ' + interval + ')\";el.movement = setTimeout(repeat, ' + interval + ');return true;';
 
						var modifAttributs = new Function(variablesFct, codeFct);
						modifAttributs(myelement);
					}

Reste pour moi a trouv� ou j'ai fait une erreur de frappe... :)
Merci beaucoup pour le temps que tu m'as accord� !

Code:

1 2 if(typeof(' + initValue + ' || ' + finalValue + ' || ' + interval + ') != \'number\') return false
typeof est mal utilis� :)
Tu r�alises des "ou" donc, le type sera forc�ment un bool�en. Il faudra peut-�tre revoir ce morceau de code ;)

Sinon pour savoir si tu fais des fautes de frappe pr�sente le code de cette mani�re :
Code:

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 28 29 30 codeFct = ' if(typeof(' + initValue + ' || ' + finalValue + ' || ' + interval + ') != \'number\')'; codeFct += ' return false;'; codeFct += ' if(el.movement)'; codeFct += ' {'; codeFct += ' clearTimeout(el.movement);'; codeFct += ' }'; codeFct += ' if(!el.style.' + proprety + ')'; codeFct += ' {'; codeFct += ' el.style.' + proprety + ' = parseInt(' + initValue + ')'; codeFct += ' };'; codeFct += ' var iDimY = parseInt(el.style.' + proprety + ');'; codeFct += ' if(iDimY == ' + finalValue + ')'; codeFct += ' { '; codeFct += ' return true;'; codeFct += ' }'; codeFct += ' if(iDimY < ' + finalValue + ')'; codeFct += ' {'; codeFct += ' var dist = Math.ceil((' + finalValue + ' - iDimY)/10);'; codeFct += ' iDimY = iDimY + dist;'; codeFct += ' }'; codeFct += ' if(iDimY > ' + finalValue + ')'; codeFct += ' {'; codeFct += ' var dist = Math.ceil((iDimY - ' + finalValue + ')/10);'; codeFct += ' iDimY = iDimY - dist;'; codeFct += ' }'; codeFct += ' el.style.' + proprety + ' = iDimY +\'' + mesure + '\';'; codeFct += ' var repeat = \"oO._DerouleDynamique(\'' + id + '\',\'' + proprety + '\', ' + initValue + ', ' + finalValue + ',' + mesure + ', ' + interval + ')\";'; codeFct += ' el.movement = setTimeout(repeat, ' + interval + ');'; codeFct += ' return true;';
Regarde si tu n'as pas fait une erreur entre les symboles : ' , ", \" et \' (avec la coloration syntaxique, la faute de frappe doit �tre facilement rep�rable ;))

- Par contre que repr�sente el.movement ? Cela m'intrigue....
- Je ne connais pas cette m�thode Math.ceil(). Faute de frappe (je me trompe peut-�tre aussi :oops:) ?
- Ce bout de code :

Code:

setTimeout(repeat, ' + interval + ');';

repeat est une variable qui contient le r�sultat retourn� par oO._DerouleDynamique() (d'apr�s ce que j'ai vu dans ton code).

Je me demande si tu n'as pas fait une erreur � ce niveau. En effet, le premier argument de setTimeout() est une fonction, le second argument est la temporisation, la syntaxe est :

Code:

setTimeout("taFonction()", "2000");

Sinon j'ai vu que tu n'avais pas oubli� les ";" dans le code :bravo:

18/08/2008, 15h32
Matthieu2000

Code:

myelement.style[balise] = valeurFinale + mesure ;

ou un eval
...
18/08/2008, 19h46
Auteur

Citation:

Envoy� par Matthieu2000

Code:

myelement.style[balise] = valeurFinale + mesure ;

ou un eval
...

:bug: :marteau:
je vais aller me coucher moi :aie:
19/08/2008, 09h39
Matthieu2000

Citation:

Envoy� par Auteur

:bug: :marteau:
je vais aller me coucher moi :aie:

?
Qu'est que j'ai dit de mal? J'ai juste balanc� un code vite fait au hasard.
19/08/2008, 11h46
Auteur

Citation:

Envoy� par Matthieu2000

?
Qu'est que j'ai dit de mal? J'ai juste balanc� un code vite fait au hasard.

Non tu n'a rien dit de mal, je me suis simplement mal exprim�, d�sol� :oops:
Disons que je n'avais pas pens� � cette �criture (qui est valide) :

Code:

myelement.style[balise] = valeurFinale + mesure ;

je suis pass� directement � l'�laboration dynamique d'une fonction. J'ai fait compliqu� alors que l'on pouvait faire simple ;)

J'oublie r�guli�rement que l'on peut utiliser cette notation pour acc�der a des objets.

Quant � eval() je ne suis pas tr�s port� sur cette m�thode, je l'avoue. Je pr�f�re un new Function() qui est plus pratique pour moi � utiliser.
19/08/2008, 11h51
Matthieu2000

le eval c'est juste pour s'amuser et compliquer le code

Citation:

styleTmp=myelement.style;
eval("styleTmp."+balise) = valeurFinale + mesure ;