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