Dynamically add rules to CSS file

问题

For each element I want to dynamically add a rule to my CSS. Each rule should have different background-image and different name. Don't know where I have made a mistake. I think that the rules are added to CSS file, but setting the ID doesn't link dynamically added div with dynamically added css rule...

$(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");
    }
});
});

The rule isn't even appended

回答1:

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

create new style element and use it

just test at SO ( run from console ) and it works

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

来源：https://stackoverflow.com/questions/37510948/dynamically-add-rules-to-css-file