Passer en parametre l'attribut CSS � une fonction

**Cdic83** · 16/08/2008, 15h38

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 :

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

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

**Auteur** · 16/08/2008, 18h19

bonjour,

tu peux cr�er dynamiquement une fonction :

Code html :

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
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>

**Cdic83** · 17/08/2008, 19h00

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

**Auteur** · 17/08/2008, 19h50

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 :

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

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 :

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

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 :

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

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.

**Cdic83** · 17/08/2008, 21h41

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 :

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

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� !

**Auteur** · 17/08/2008, 23h19

Code :

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

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 javascript :

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
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

) ?
- Ce bout de code :

Code :

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

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 :

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

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

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

**Matthieu2000** · 18/08/2008, 15h32

Code :

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

myelement.style[balise] = valeurFinale + mesure ;

ou un eval
...

**Auteur** · 18/08/2008, 19h46

Envoy� par Matthieu2000

Code :

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

myelement.style[balise] = valeurFinale + mesure ;

ou un eval
...

je vais aller me coucher moi

**Matthieu2000** · 19/08/2008, 09h39

Envoy� par Auteur

je vais aller me coucher moi

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

**Auteur** · 19/08/2008, 11h46

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�

Disons que je n'avais pas pens� � cette �criture (qui est valide) :

Code :

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

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.

**Matthieu2000** · 19/08/2008, 11h51

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

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

Passer en parametre l'attribut CSS � une fonction

JavaScript

Discussions similaires

Partager

Partager