Añadir reglas dinámicamente al archivo CSS

Para cada elemento quiero agregar dinámicamente una regla a mi CSS. Cada regla debe tener una imagen de fondo diferente y un nombre diferente. No sé dónde he cometido un error. Creo que las reglas se agregan al archivo CSS, pero la configuración del ID no vincula la división agregada dinámicamente con la regla css agregada dinámicamente …

$(document).ready(function () { var stylesheet = document.styleSheets[0]; var url = '/Home/PrikaziTipoveLokacija'; //this gets all the data from database and it works fine $.ajax({ type: "GET", url: url, cache: false, success: function (data) { //Checking number of rules in my CSS with this loop before adding new rules for (var i = 0; i < stylesheet.cssRules.length; i++) { count++; } alert(count); //this returns count 16 (CSS files has 16 rules) count = 0; //this loop should add a rule to CSS for each element in data. I have set the same image for every element for now. for (elem in data) { if (stylesheet.addRule) { stylesheet.addRule(data[elem].Kljuc + '_ikona', '{ background-image: url("../Images/mesnicaicon.png"); background-size: cover; background-repeat:no-repeat;}'); } else if (stylesheet.insertRule) { stylesheet.insertRule(data[elem].Kljuc + '_ikona' + '{' + 'background-image: url("../Images/mesnicaicon.png"); background-size: cover; background-repeat:no-repeat;' + '}', stylesheet.cssRules.length); } } //Checking number of rules in my CSS with this loop after adding new rules for (var i = 0; i < stylesheet.cssRules.length; i++) { count++; } alert(count); //this returns count 33, therefore , the new rules are added (Data has 17 elements, so, 33-16=17) count = 0; for (elem in data) { var div = document.createElement('div'); div.className = 'ikona'; //irrelevant class div.id = data[elem].Kljuc + '_ikona'; //for each element set different id depending on the attribute 'Kljuc' from database var onclick = document.createAttribute("onclick"); onclick.value = 'prikaziTipLokacije('+ data[elem].ID +')'; div.setAttributeNode(onclick); div.innerHTML = data[elem].Naziv; document.getElementById('izbornik_za_lokacije').appendChild(div); } }, error: function () { alert("Greška pri dohvaćanju tipova lokacija"); } }); }); 

La regla ni siquiera está anexada.

Captura de pantalla de las herramientas para desarrolladores de Google Chrome.

 var style = document.createElement('style'); style.innerHTML = '*{ color:red; } /* put your stuff here */'; document.body.appendChild(style); 

Crea un nuevo elemento de estilo y úsalo.

solo prueba en SO (corre desde la consola) y funciona

 document.styleSheets[0].insertRule('* { color: red; }')