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 ;