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

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

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做到这一点？

解决方法:

没有用于操作伪类的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.

标签：jquery,javascript,css,selection,textselection
来源： https://codeday.me/bug/20190518/1129765.html