使用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);    
}

您可以使用IE的stylesheet.cssRules [index] .style ， stylesheet.rules [index] .style来访问和更改规则，这会使它变得更加复杂。

我没有包括使用addRule（）的IE6-8示例，因为那些版本的IE不支持::selection 。