Forum d'entraide PHPFrance

Bonjour à tous,
je suis à la recherche d'un moyen pour changer dynamiquement le STYLE d'une balise option.
J'ai essayé d'y accéder via document.form1.select1.options.style (avec form1: name de mon formulaire, select1: name de ma balise select...Etc) mais cela ne donne rien. Quelqu'un a une idée car on arrive à modifier dynamiquement les styles de toutes les balises quasiment mais pas d'OPTION
Quelqu'un peut m'aider?

Bon j'ai presque réussi mais sous FF pas IE (en utilisant pourtant des méthodes issues de IE

)
J'ai essayé innerHTML, puis ici className
InnerHTML ne fonctionne ni sous IE ni sous FF... className fonctionne sous FF mais pas sous IE...](*,)](*,)
Voici mon code qui a pour but pour mettre en valeur une balise option lorsque celle-ci a été double-cliquée et insérée dans le champ input. (Mise en gras ici)

Code : Tout sélectionner

<html>
<head>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #fff; /*couleur de fond blanche*/
}
.normal
{
font-weight:normal;
}
.bold
{
font-weight:bold;
}
</style>
<script type="text/javascript">
function select(){
var i=0;
var toto=0;

this.document.form1.input1.value+=this.document.form1.select1.value;
for (i=0; i < document.form1.select1.options.length; i++)
	if (document.form1.select1.options[i].value == this.document.form1.select1.value)
		toto=i;
this.document.form1.select1.options[toto].className="bold";
}
function addition(){
this.document.form1.input1.value+=this.document.form1.button1.value;
}
function soustraction(){
this.document.form1.input1.value+=this.document.form1.button2.value;
}
function multiplier(){
this.document.form1.input1.value+=this.document.form1.button3.value;
}
function diviser(){
this.document.form1.input1.value+=this.document.form1.button4.value;
}
function effacer(){
this.document.form1.input1.value="";
}
</script>
</head>
<body>
<form name="form1">
<select name="select1" size="3" onDblClick="javascript:select()">
<option id="id1" class="normal" value="1">Un</option>
<option id="id2" class="normal" value="2">Deux</option>
<option id="id3" class="normal" value="3">Trois</option>
</select>
<input name="button1" type="button" value="+" onClick="javascript:addition()"></input>
<input name="button2" type="button" value="-" onClick="javascript:soustraction()"></input>
<input name="button3" type="button" value="x" onClick="javascript:multiplier()"></input>
<input name="button4" type="button" value="/" onClick="javascript:diviser()"></input>
<input name="button5" type="button" value="Effacer" onClick="javascript:effacer()"></input>
<input name="input1" type="text" value=""></input>
</form>
</body>
</html>

En gros quelqu'un voit pourquoi cela ne fonctionne pas sous IE?

Visiblement IE n'accepte pas de style pour le tag option puisque en mettant directement bold comme classe

<option id="id1" class="bold" value="1">Un</option>

, ça ne passe que sur firefox. Ne cherche donc pas côté javascript

class="bold" et dans ta feuille de style ?

Si tu veux le mettre sur la balise, c'est style="font-weight: bold;"

class="bold" et dans ta feuille de style ?

Si tu veux le mettre sur la balise, c'est style="font-weight: bold;"

J'ai essayé cette solution "mamie" (

) mais c'est pareil c'est à dire elle ne fonctionne que sous FF et non sur IE. J'ai préféré utiliser className dans le but d'utiliser mes classes CSS (je trouve ça plus propre) sans manipuler le style de chaque objet directement.

IE

Pour revenir à ce que tu dis Daoud, j'ai trouvé className, innerHTML etc.. sur le site de Microsoft (MSDN Library) c'est grave quand même, leur produit ne fonctionne même pas.
Une autre solution ? ](*,)

Salut,

ce que je voulais te dire c'est qu'apparement IE ne permet pas de donner un style aux balises option, donc quoique tu essaies, rien ne marchera

Déjà ptit con, tu arrêtes de m'appeler Mamie. Non mais ho !

Tu peux styler les option des select non déroulant : http://www.thefixor.com/help/formstyle/ ... mfinds.php

Et même déroulant :
http://papynet.mvps.org/CSS/CSS-02.htm

Ok, donc pour que cela marche il faut attribuer le style à la balise select et non option.

Bah relis, et tu verras...surtout le second lien.

Effectivement, il est possible de mettre des styles dans la balise option, mais visiblement IE ne veut pas de font-weight.

Pourquoi veux-tu mettre en gras certaines options ?

Déjà ptit con, tu arrêtes de m'appeler Mamie. Non mais ho !

t'y vas un peu fort qd même, c'est pô méchant (sais-tu qu'en ancien français ça veut "ma chère et tendre" et non "mémé"...)

bref...

Bon pour revenir au sujet, la MSDN précise bien que la balise OPTION possède la propriété className (et que donc on doit pouvoir modifier cette propriété) >> cliquez ici (regardez la section Applies To)

Si vous cliquez sur OPTION vous verrez bien que className apparaît dans les propriétés/attributs : Sets or retrieves the class of the object.

D'ailleurs, lorsque j'accès à la propriété className pour la lire je n'ai pas de soucis

Code : Tout sélectionner

alert('className:'+this.document.form1.select1.options[toto].className);

Besoin d'un expert DOM...

Déjà ptit con, tu arrêtes de m'appeler Mamie. Non mais ho !
t'y vas un peu fort qd même, c'est pô méchant (sais-tu qu'en ancien français ça veut "ma chère et tendre" et non "mémé"...) bref...

Je le prends mal, je suis susceptible sur mon âge. Vala.
edit : ce problème est réglé.

Pour ton souci, je redemande : pourquoi en gras ? c'est réservé aux optgroup il me semble ?

La conclusion n'est pas que ça ne marche pas, mais que l'attribut font-weight ne marche pas sur IE pour une balise option. Mets une couleur

La conclusion n'est pas que ça ne marche pas, mais que l'attribut font-weight ne marche pas sur IE pour une balise option. Mets une couleur

Ouai j'ai jeté mon dévolu sur backgroundcolor et color, il n'y a que ça que l'on puisse modifier avec IE (et compatible IE)... Enfin bon j'aurais essayé

Forum d'entraide PHPFrance

Encore ma balise option....

Encore ma balise option....