如何使用 Javascript 设置 CSS3 ::selection答案

【问题标题】：How to set CSS3 ::selection using Javascript如何使用 Javascript 设置 CSS3 ::selection
【发布时间】：2015-01-15 21:06:02
【问题描述】：

有谁知道如何使用 Javascript 动态执行此 CSS 规则然后禁用它（特别是在某些鼠标手势期间抑制 Chrome 中令人讨厌的选择）：

::selection{
    background:transparent;
}

例如：document.body.style['::selection']['background']="transparent";，但它当然不起作用。

【问题讨论】：

标签： javascript css google-chrome selection

【解决方案1】：

我能想到的一些方法：

document.addEventListener("selectstart", function(){return false;});

CSS

pointer-events: none;

【讨论】：

试过selectstart event，令人讨厌的选择仍然出现在Chrome 39中。使用document.body.style.pointerEvents='none';，我的页面根本不会对任何鼠标事件做出反应。还是非常感谢。似乎::selection 工作得很好，但我需要找到一种方法来禁用它以在某些情况下允许选择。

【解决方案2】：

我尝试了这个解决方法，它有效：

var styleElem=document.createElement('style'); 
styleElem.innerHTML='::selection{ background:transparent; }';

// enable in some cases
document.head.appendChild(styleElem);

// disable when not needed
window.getSelection().removeAllRanges();
document.head.removeChild(styleElem);

【讨论】：