javascript - 动态添加规则到 CSS 文件

Question

我想为每个元素动态添加一个规则到我的 CSS。每个规则应该有不同的背景图像和不同的名称。不知道我在哪里犯了错误。我认为规则已添加到 CSS 文件，但设置 ID 不会将动态添加的 div 与动态添加的 css 规则链接起来...

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

规则甚至没有附加

Answer 1

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

创建新样式元素并使用它

只需在 SO 上进行测试(从控制台运行)即可运行

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