Passage paramètre / setStyle

Version imprimable

22/05/2007, 17h12
rollbich

Passage paramètre / setStyle

bonjour,
Ca fait 2 jours que je tourne en rond alors j'ai besoin d'aide.
J'ai recopié les 2 scripts
- camelize qui enlève les tirets par ex : background-color devient backgroundColor
- setStyle
provenant des librairies Prototype.js dans mon <head> et ajouté la ligne en gras pour ajouter la fonction cameliz comme une extension de l'objet String. Je voulais ensuite en cliquant sur le bouton que j'ai défini changer le background avec setStyle. Ca ne marche pas.

Voir post dans mon 2è message pour le code

Merci

J'ai cerné un peu mieux le problème. En faisant :

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
 
<head>
<script type="text/javascript">
function cameliz() {
    return "backgroundColor";
}
String.prototype.camelize = cameliz;
 
function setStyle(element, style) {
    element = document.getElementById(element);
    for (name in style) {
      alert(name);
	}
  }
 
function gris() {
	setStyle("body", {background-color: "grey"});
}
</script>
</head>
<body>
<div id="body">
<input type="button" onclick="gris();" value ="Griser"/>
</div>
</body>

La fonction alert(name) ne fonctionne pas. Par contre

Code:

1
2
 
setStyle("body", {backgroundColor: "grey"});

Ca marche
J'en déduis donc que si je mets un tiret, name ne peut même pas être évalué ???????

Je suis perdu !!

23/05/2007, 12h58
roro06

Bonjour

C'est ton systeme de notation qui ne va pas :
{background-color: "grey"}

La notation entre {} ne définit pas une variable, mais plutot un bloc, ou un objet. Résultat : background-color est sémantiquement faux, d'où une erreur de syntaxe.

Au passage, éviter des "noms connus" pour les variables, comme name ou style.C'est générateur d'horreurs parfois difficiles à détecter. Utiliser à la rigueur name_ et style_, par exemple

Merci pour ta réponse.
Mais pourtant, on peut utiliser la fonction alert sur un objet ????
Ci joint les fonctions de la librairie prototype.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
setStyle: function(element, style) {
    element = document.getElementById(element);
    for (name in style)
      element.style[name.camelize()] = style[name];
  },
camelize: function() {
    var oStringList = this.split('-');
    if (oStringList.length == 1) return oStringList[0];
 
    var camelizedString = this.indexOf('-') == 0
      ? oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1)
      : oStringList[0];
 
    for (var i = 1, len = oStringList.length; i < len; i++) {
      var s = oStringList[i];
      camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
    }
 
    return camelizedString;
  },

utilisation librairie prototype

En fait, même ce simple code utilisant la librairie prototype ne fonctionne pas.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Site</title>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<script src="prototype.js" type="text/javascript"></script>
</head>
<body>
<div id="body">
<h1>Site</h1>
<img alt="Page en construction" src="accueil.jpg" />
</div>
<div>
<input type="button" onclick="setStyle('body', {background-color: 'grey'});" value ="Griser" />
</div>
</body>
</html>

Ce que tu fais est faux.
Il faut faire comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Site</title>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<script src="prototype.js" type="text/javascript"></script>
</head>
<body>
<div id="body">
<h1>Site</h1>
<img alt="Page en construction" src="accueil.jpg" />
</div>
<div>
<input type="button" onclick="$('body').setStyle({background-color: 'grey'});" value ="Griser" />
</div>
</body>
</html>

Merci Eyolas et merci roro.
J'ai trouvé comment utiliser setStyle.
setStyle fait partie de l'objet Element.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <head> <title>Site</title> <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" /> <script src="prototype.js" type="text/javascript"></script> <script> function gris() { alert("coco-lapin".camelize()); Element.setStyle("body", {backgroundColor: "grey"}); } </script> </head> <body> <div id="body"> <h1>Site de l'équipe 2</h1> <img alt="Page en construction" src="accueil.jpg" /> </div> <div> <input type="button" onclick="gris();" value ="Griser" /> </div>
Par contre, ça fonctionne toujours pas avec background-color alors que dans le code de la fonction setStyle (voir précédent post), la fonction camelize est utilisée pour résoudre le problème.
Comme tu me le disais, il semble y avoir un problème de type mais je n'arrive pas à trouver comment faire. On doit y arriver en n'utilisant pas la notation objet entre les {}.
Mais bon, c'est justement fait exprès pour la lisibilité.
Quand on exécute le programme, il donne bien cocoLapin et grise le div.
La fonction camelize fonctionne parfaitement mais pas dans setStyle, c'est curieux????

Bon du coup, je fais comme ça

Code:

1
2
3
4
5
 
function setStyle(element, stylez, attri) {
    element = document.getElementById(element);
    element.style[stylez.camelize()] = attri;
  }

puis pour appeler la fonction

Code:

1
2
 
setStyle("body", "background-color", "grey");

Merci pour tout