Fale1994 Fale1994 - 6 months ago 19
Ajax Question

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

screenshot of google chrome developer tools

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