更改文本高亮選擇與JS

Question

對於標準的瀏覽器可以使用這樣的事情來改變所選文本的顏色：

div.txtArea::selection { 
background: transparent; 
} 

div.txtArea::-moz-selection { 
background: transparent; 
} 

div.txtArea::-webkit-selection { 
background: transparent; 
} 

但我需要用JavaScript來做到這一點，而不是。

我的用戶可以選擇文字然後改變顏色。當他們選擇另一種顏色時，它會不斷更新顏色。由於文本被選中，他們無法看到顏色的外觀。我只需要在換色器的鼠標懸停期間將我的目標元素的選擇樣式更改爲透明。

我已經嘗試了一些事情，包括：

$('div.txtArea').css({ 
    'selection': 'transparent', 
    '-moz-selection': 'transparent', 
    '-webkit-selection': 'transparent' 
}); 

有沒有辦法用JavaScript來做到這一點？

Answer 1

沒有用於操作僞類的DOM接口。你唯一能做的就是將規則添加到樣式表中。例如：

// Get the first stylesheet 
var ss = document.styleSheets[0] 

// Use insertRule() for standards, addRule() for IE 
if ("insertRule" in ss) { 
    ss.insertRule('div.txtArea::-moz-selection { background: transparent; }', 0);  
    ss.insertRule('div.txtArea::selection { background: transparent; }', 0);  
    ss.insertRule('div.txtArea::-webkit-selection { background: transparent; }', 0);  
} 

可以.style訪問和更改使用stylesheet.cssRules [指數] .style，stylesheet.rules [指數]規則，IE瀏覽器，這是它變得有點複雜。

我沒有包含使用addRule（）的IE6-8示例，因爲這些版本的IE不支持::selection。