如何使用JavaScript设置CSS3 :: selection

Question

Does anyone have an idea how to execute this CSS rule dynamically using Javascript and then disable it (particularly to suppress annoying selection in Chrome during certain mouse gestures):

::selection{
    background:transparent;
}

Eg: document.body.style['::selection']['background']="transparent"; , but of course it doesn't work.

Answer 1

Some ways I can think of:

JS

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

CSS

pointer-events: none;

Answer 2

I tried this workaround, it works:

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);