使用JS更改文本选择突出显示

对于标准浏览器，您可以使用类似的内容来更改所选文本的颜色：

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

但我需要用JavaScript来做这件事。

我的用户可以选择文本然后更改颜色。 当他们选择另一种颜色时，它会不断更新颜色。 由于选择了文本，因此无法看到颜色的样子。 我需要将目标元素的选择样式更改为仅在换色器鼠标hover期间透明。

我尝试过一些事情，包括：

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

您可以使用stylesheet.cssRules [index] .style ， stylesheet.rules [index] .style为IE访问和更改规则，这是一个更复杂的地方。

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