Passage paramètre / setStyle librairie prototype.js [Résolu]

rollbich · 22/05/2007, 17h12

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

rollbich · 22/05/2007, 19h56

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

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

roro06 · 23/05/2007, 12h58

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

rollbich · 23/05/2007, 18h42

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 :

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
 
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;
  },

rollbich · 23/05/2007, 19h07

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

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

eyolas · 23/05/2007, 19h46

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

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

rollbich · 23/05/2007, 20h26

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

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

rollbich · 23/05/2007, 23h03

Bon du coup, je fais comme ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci pour tout

22/05/2007, 17h12	#1
rollbich Invité régulier Inscription : janvier 2006 Messages : 18 Détails du profil Informations forums : Inscription : janvier 2006 Messages : 18 Points : 9 Points : 9	Passage paramètre / setStyle librairie prototype.js 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
	00

23/05/2007, 12h58	#3
roro06 Modérateur Inscription : avril 2007 Messages : 1 364 Détails du profil Informations personnelles : Âge : 42 Informations forums : Inscription : avril 2007 Messages : 1 364 Points : 1 551 Points : 1 551	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email