Discussion :

[Arnaud F.]

Bonjour,

je souhaite attribuer un style a un élément nouvellement créé, je fais donc :

Code :

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

1
2
3
4
b = new Element('div', {
	id: 'b1',
	style: "position:'absolute'; left:100px; top:100px; width:100px; height:100px; background-color: blue"
});

Seulement, cette méthode (au niveau du style devient vite illisible, d'autant plus quand des variables viennent s'en mêler...

J'aimerai pouvoir écrire :

Code :

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

1
2
3
4
5
6
7
8
9
10
b = new Element('div', {
	id: 'b1',
	style: {position:'absolute',
		left:'100px',
		top:'100px',
		width:'100px',
		height:'100px',
		backgroundColor: 'blue'
});
document.body.appendChild(b);

Seulement cette écriture n'a pas l'air possible, (aucun affichage de div) avec la seconde méthode.

Je me suis planté quelque part?

[Bovino]

Ton objet style n'est pas fermé

Code :

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

1
2
3
4
5
6
7
8
9
10
b = new Element('div', {
	id: 'b1',
	style: {position:'absolute',
		left:'100px',
		top:'100px',
		width:'100px',
		height:'100px',
		backgroundColor: 'blue'
        }
});

[Arnaud F.]

Simple erreur de recopie, le problème n'est pas là...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
b = new Element('div', {
	id: 'b1',
// 	style: "position:'absolute'; left:100px; top:100px; width:100px; height:100px; background-color: blue"
	style : {
		position:'absolute',
		left:'100px',
		top:'100px',
		width:'100px',
		height:'100px',
		backgroundColor: 'blue'
	}
});

Ne fonctionne pas...

Dans le code source généré (vu par Google Chrome) j'ai :

Code :

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

<div id="b1" style="[object Object]">

Autrement dit, le code contenu dans le style recopié en tant qu'objet tel quel, tandis qu'avec la méthode commenté, le style est bien à jour

[Bovino]

Et en faisant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
b = new Element('div', {
	id: 'b1',
// 	style: "position:'absolute'; left:100px; top:100px; width:100px; height:100px; background-color: blue"
	'style' : {
		position:'absolute',
		left:'100px',
		top:'100px',
		width:'100px',
		height:'100px',
		backgroundColor: 'blue'
	}
});

[gwyohm]

Salut

Je crois en effet qu'on ne peut pas le faire... Solution : faire un new Element sans le style puis un setStyle :

Code :

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

1
2
3
4
5
6
7
8
var b = new Element('div', {id: 'b1'}).setStyle({
		position:'absolute',
		left:'100px',
		top:'100px',
		width:'100px',
		height:'100px',
		backgroundColor: 'blue'
	});

[Arnaud F.]

Et en faisant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
b = new Element('div', {
	id: 'b1',
// 	style: "position:'absolute'; left:100px; top:100px; width:100px; height:100px; background-color: blue"
	'style' : {
		position:'absolute',
		left:'100px',
		top:'100px',
		width:'100px',
		height:'100px',
		backgroundColor: 'blue'
	}
});

Perdu !

Salut

Je crois en effet qu'on ne peut pas le faire... Solution : faire un new Element sans le style puis un setStyle :

Code :

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

1
2
3
4
5
6
7
8
var b = new Element('div', {id: 'b1'}).setStyle({
		position:'absolute',
		left:'100px',
		top:'100px',
		width:'100px',
		height:'100px',
		backgroundColor: 'blue'
	});

C'est la solution que j'avais adopté sur le coup, et que je vais continuer à adopter vu que ça ne semble pas faisable depuis le constructeur ...

[Bovino]

Effectivement, je viens de regarder un peu dans le code de la lib et la création d'éléments se fait en listant les propriétés passées à l'objet et en leur attribuant la valeur correspondante, il n'est donc pas possible de passer un objet comme valeur d'un attribut.
C'est d'ailleurs dommage car ce ne serait pas trop compliqué à implémenter...