YUI3 FF檢索選中的選項和background-color屬性

我正在嘗試設置到它的背景顏色的選擇元素的背景-Color的選擇選項，如下所示：YUI3 FF檢索選中的選項和background-color屬性

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'); 
    });

奇怪的是這個作品在Chrome中完美。但在FF中，它似乎總是回覆到特定的顏色。更奇怪的是，這個：

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

似乎工作。但是，當我使用selectedIndex檢索選定的選項時，它不再起作用。

看看這裏：http://jsfiddle.net/9sy02756/4/

謝謝！

UPDATE

我決定以不同的方式處理這個是這樣的：

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

這樣父SELECT元素只被分配在同一類作爲選擇的子選項和CSS需要的護理休息。反正可能是一個更清潔的解決方案。

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

來源

2015-09-05 S. Henkie

你爲什麼不加入您的更新作爲一個答案，而不是修改？ – stiemannkj1

嗯，我想我沒有，因爲它不是真正的原始問題的答案。我仍然對此感到好奇。我的更新基本上是完成我從一開始就想做的事情的不同方式。 –

在你的代碼，當你做this.one('option:checked').getStyle('backgroundColor')，YUI使用window.getComputedStyle方法。

在Firefox中，獲取<option>上的背景顏色會返回懸停顏色，這是一個非常漂亮的藍色。而且它將保持這種方式，直到你再次打開選擇。

解決此問題的唯一方法是在<option>的mouseenter事件中存儲顏色，並在change期間應用此顏色。但<option>上的mouseenter只在firefox中觸發，而不是在IE瀏覽器中觸發。

最後，你需要兩種方法的組合，才能做到最好。所以這個問題得到了解答，解決了這個謎，但是您在編輯中提出的替代方法更簡單。

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/

來源

2016-03-11 00:52:37

這是一個很好的stackoverflow如何提供有趣的腦筋急轉彎的例子。毫無意義但很有趣 –

YUI3 FF檢索選中的選項和background-color屬性

回答

相關問題