YUI3 FF récupérer option sélectionnée et sa propriété background-color

Question

J'essaie de définir la couleur d'arrière-plan d'un élément Sélectionnez la couleur d'arrière-plan, il est sélectionné Option comme ceci:

YUI().use('selector-css3', 'node', function(Y) { 

     function set_color(e) { 
      this.setStyle('backgroundColor',this.one('option:checked').getStyle('backgroundColor')); 
     }; 

     Y.on(['available','change'], set_color, '#id_linkcolor'); 
    }); 

Étrangement fonctionne ce parfaitement dans Chrome. En FF cependant, il semble toujours revenir à une couleur spécifique. Encore plus bizarrement, ceci:

this.setStyle('backgroundColor',this.get('options').item(3).getStyle('backgroundColor'); 

semble fonctionner. Mais lorsque j'utilise selectedIndex pour récupérer l'option sélectionnée, cela ne fonctionne plus.

Check it out ici: http://jsfiddle.net/9sy02756/4/

Merci!

MISE À JOUR

j'ai décidé d'adopter une approche différente comme ceci:

function set_color(e) { 
    this.set('className',''); 
    this.addClass('linkcolor_'+this.one('option:checked').get('value')); 
}; 

De cette façon, l'élément parent SELECT obtient simplement attribué la même classe que l'enfant sélectionné OPTION et css prend en charge la du repos. Probablement une solution plus propre de toute façon.

http://jsfiddle.net/9sy02756/6/

Answer 1

Dans votre code, lorsque vous faites this.one('option:checked').getStyle('backgroundColor'), YUI utilise la méthode window.getComputedStyle.

Dans Firefox, l'obtention de la couleur d'arrière-plan sur un <option> renvoie la couleur du survol, qui s'avère être un très beau bleu. Et cela restera comme ça jusqu'à ce que vous ouvriez à nouveau le select. La seule solution consiste à stocker la couleur pendant l'événement mouseenter de <option> et à l'appliquer pendant change. Mais mouseenter sur <option> sont seulement déclenchés dans firefox, pas de chrome ni IE. En fin de compte, vous aurez besoin d'un mélange des deux approches pour bien faire les choses. Donc, la question est résolue, le mystère est résolu, mais l'approche alternative que vous avez proposée dans l'édition est beaucoup plus simple.

YUI().use('node', 'selector-css3', function(Y) { 
    var lastColor; 

    function set_color(e) { 
    this.setStyle('backgroundColor', lastColor || this.one('option:checked').getStyle('backgroundColor')); 
    }; 

    Y.on(['available', 'change'], set_color, '#id_linkcolor'); 

    // For firefox, store computed color before default select blue is applied 
    Y.on("mouseover", function(e) { 
    lastColor = e.target.getStyle('backgroundColor'); 
    }, '#id_linkcolor option'); 
}); 

http://jsfiddle.net/fxaeberhard/hy3okdph/