манипулирование псевдо элементами с помощью javascript

Question

Я пытаюсь динамически изменять цвет выделения контента с помощью javascript из html, но, похоже, он не работает. В идеале Id хотел изменить раздел цвет, чтобы быть один из любого массива ...

var colors = Array("#A3F8EF", "#FF7275", "#CBB6E7", "#FF9D74", "#FDF874"), idx; 

, но я не могу даже получить его, чтобы изменить цвет выделения для одного цвета различно. Код, который я пытаюсь это:

document.styleSheets[0].insertRule('html::-moz-selection {background-color: #FDF874;}',0);  
document.styleSheets[0].insertRule('html::selection {background-color: #FDF874;}',0);  
document.styleSheets[0].insertRule('html::-webkit-selection {background-color: #FDF874;}',0); 

любые идеи было бы здорово

Answer 1

проблема, вероятно, что вы получаете исключение разборе один из тех приставочные правил, и поэтому код добавления других Безразлично» t запустить. Если вы поместите их в try/catch, это работает: (я изменил название тега из html в *)

следующих, например, работает в Chrome, Firefox и IE11:

var colors = ["#A3F8EF", "#FF7275", "#CBB6E7", "#FF9D74", "#FDF874"]; 
 
setRandomSelectionColor(); 
 

 
function setRandomSelectionColor() { 
 
    var n = Math.floor(Math.random() * colors.length); 
 
    var color = colors[n]; 
 
    
 
    try { 
 
    document.styleSheets[0].insertRule("*::-moz-selection {background-color: " + color + ";}", 0); 
 
    } 
 
    catch (e) { 
 
    } 
 
    try { 
 
    document.styleSheets[0].insertRule("*::selection {background-color: " + color + ";}", 0); 
 
    } 
 
    catch (e) { 
 
    } 
 
    try { 
 
    document.styleSheets[0].insertRule("*::-webkit-selection {background-color: " + color + ";}", 0); 
 
    } 
 
    catch (e) { 
 
    } 
 
}

<p>Select your text here!</p>

---

Оригинал ответа(прежде чем я получил любопытно, почему он терпел неудачу):

у меня не было никакой удачи с insertRule, но вы можете динамически создавать и заменить style элемент: (Я также изменил название тега из html в *)

Это работает в Chrome, Firefox и IE11:

var colors = ["#A3F8EF", "#FF7275", "#CBB6E7", "#FF9D74", "#FDF874"]; 
 
setRandomSelectionColor(); 
 
$("input").on("click", setRandomSelectionColor); 
 

 
function setRandomSelectionColor() { 
 
    var n = Math.floor(Math.random() * colors.length); 
 
    var color = colors[n]; 
 
    
 
    $("#the-style").remove(); 
 
    $("<style id='the-style'>\n" + 
 
    "*::-moz-selection {background-color: " + color + ";}" + 
 
    "*::selection {background-color: " + color + ";}" + 
 
    "*::-webkit-selection {background-color: " + color + ";}" + 
 
    "</style>").appendTo('head'); 
 
}

<p>Select your text here!</p> 
 
<input type="button" value="New Random Color"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>