Dynamically add rules to CSS file

Question

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

Have you added a hash sign # to the new rule(s) to identify an id value? — Andy G
– Andy G, Commented May 29, 2016 at 15:00

Vasiliy vvscode Vanchuk · Accepted Answer · 2016-05-29 14:55:52Z

2

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; }')

edited May 29, 2016 at 14:55

answered May 29, 2016 at 14:22

Vasiliy vvscode Vanchuk

7,1992 gold badges24 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fale1994 Over a year ago

Thank you for your answer, it's working. But still I'm interested in what have I done wrong in adding rules to existing external CSS file

Vasiliy vvscode Vanchuk Over a year ago

just test in console at SO document.styleSheets[0].insertRule('* { color: red; }') and it works

Collectives™ on Stack Overflow

Dynamically add rules to CSS file

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related