Javascript : Change selection background

Question

How should I do this in Javascript?

// CSS
*::-moz-selection{
 background:transparent; 
}

I tried these but doesn't really works:

// Javascript
document.mozSelection = "transparent";
document.body.mozSelection = "transparent";

Answer 1

You can add a rule to the stylesheet.

// Get the first stylesheet 
var ssheet = document.styleSheets[0];

if ("insertRule" in ss) {
    ss.insertRule('#yourdivcontainer::-moz-selection { background: transparent; }', 0);        
}

IMO, it's not a good practice anyway. You should create a CSS class with the selection color and change the class itself via JS instead of the style.

Answer 2

:: selectors are for pseudo-elements, CSS objects that don't correspond to actual element nodes. Because there is no element node to match ::-moz-selection, you can't style it directly on an element's .style.background property.

Instead you would have to insert a new stylesheet rule duplicating the above CSS (see this question for a couple of methods of doing that).