更改文本高亮选择与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。