Ajouter dynamiquement des règles au fichier CSS

Question

Pour chaque élément, je souhaite ajouter dynamiquement une règle à mon CSS. Chaque règle doit avoir une image de fond différente et un nom différent. Je ne sais pas où j'ai fait une erreur. Je pense que les règles sont ajoutées au fichier CSS, mais la définition de l'ID ne lie pas div dynamiquement ajouté à l'article css dynamiquement ajouté ...

$(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 règle est même pas ajouté

Answer 1

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

créer un nouvel élément de style et de l'utiliser

essai juste au SO (exécuté à partir de la console) et il fonctionne

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