Changing a CSS Rule-Set from JavaScript

function changeCSS() {  let myClassRule = document.styleSheets[0].cssRules[0];  if (myClassRule.style.color == "red")    myClassRule.style.color = "blue";  else    myClassRule.style.color = "red";}

.my-class {  color: red;}

<p class="my-class">First paragraph</p><p class="my-class">Second paragraph</p><button onclick="changeCSS()">Change the stylesheet!</button>

modify a css rule object with javascript

You could use the cssRules on the DOM stylesheet object corresponding to your original stylesheet to modify your rule.

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';

Note that IE uses rules instead of cssRules.

Here is a demonstration: http://jsfiddle.net/8Mnsf/1/

Update CSS rule property value

If you wan to change the css rules of the ".tile" class, then you can do it.
There is a post that explains it very well :

function changeBackgroundImage(className, value){
        var ss = document.styleSheets;
        for (var i=0; i<ss.length; i++) {
            var ss = document.styleSheets;
            var rules = ss[i].cssRules || ss[i].rules;
            for (var j=0; j<rules.length; j++) {
                if (rules[j].selectorText === className) {
                    rules[j].style.backgroundImage = value;
                }
            }
        }
}

You can call it like this :

changeBackgroundImage(".tile","url(tile.jpg)");

Update CSS rule property value

If you wan to change the css rules of the ".tile" class, then you can do it.
There is a post that explains it very well :

function changeBackgroundImage(className, value){
        var ss = document.styleSheets;
        for (var i=0; i<ss.length; i++) {
            var ss = document.styleSheets;
            var rules = ss[i].cssRules || ss[i].rules;
            for (var j=0; j<rules.length; j++) {
                if (rules[j].selectorText === className) {
                    rules[j].style.backgroundImage = value;
                }
            }
        }
}

You can call it like this :

changeBackgroundImage(".tile","url(tile.jpg)");

Modifying of css by document.styleSheets

Modifying styleSheets directly can be tricky.

I prefer to append a new style element to the document and place the modified CSS in there. Since it is the last style element in the document, it will override any earlier CSS rule that has a matching selector.

For example, this will set the font size of the body to 1rem:

let style = document.createElement('style');
style.innerHTML = 'body { font-size: 1rem; }';
document.head.appendChild(style);

Overwrite a css rule using javascript or jquery

You should not change a stylesheet rule. Instead change where you are adding classes to control the display state. Add a class to the table (or tbody) and not the rows.

Example: you want company rows hidden, you add a class "companyHidden" to the table element. The following rule will hide those rows.

table.companyHidden tr.company {
    display: none;
}

This way you do not have to worry about new rows and CSS does the work for you.

Dynamically change CSS rules in JavaScript or jQuery

You jQuery .css() method to do that.

$('.red').css('color', 'purple');

For multiple rules:

$('.red').css({
    'color': 'purple',
    'font-size': '20px'
});

When you add dynamic element in future to DOM by the way of append, just give those element some class or id and write CSS rules like above after appending them and they will applied for all dynamically created element.

Working sample

Note

Add dynamic rules is not a good solution in my point of view. Instead of the you can load some external CSS file.

But if you need something like dynamic rules add method then:

$('head').append(
  $('<style/>', {
    id: 'mystyle',
    html: '.red {color: purple }'
  })
);

And for future use:

$('#mystyle').append(' .someother { color: green; font-size: 13px } ');

Working sample

---

Related Topics