Programatically create new CSS rules in a stylesheet

Question

For creating new CSS rules in a stylesheet, as of now, I only know .insertRule() (excluding the non-standard ways).

Are there any other ways of creating more CSS rules? Something, for example:
Warning: this is not standard, it is just an example to display the intent

var rule = new CSSStyleRule();
rule.selectorText = '.selector';
rule.style.display = 'block';
rule.style.color = 'red';
ruleSet.append(rule);

Anything like or somewhat like the above works as an answer. Instead of new, it may be document.createCssRule() or stylesheet.createCssRule()... I just this it would be useful for a piece of software I'm developing which left me if there's a programatically way of modifying values in such interface where to add new stuff is not restricted to a parsed string.

Do not worry about IE9 and below when answering, please.

Note: (to unclose) This is not about how to find and modify current CSS rules, this is about making new ones without using the text parser which is what .insertRule() is without building a complete CSS string like .insertRule() requires.

The code you posted can work as it is, if you create the associated classes: jsfiddle.net/8s6otsc3 — blex
– blex, Commented Jun 29, 2015 at 22:26
@xdhmoore the .js less parser is the original. All the others are adaptations to their corresponding programming languages. — brunoais
– brunoais, Commented Jun 30, 2015 at 5:34

Oriol · Accepted Answer · 2015-06-29 22:01:22Z

4

You can add an empty rule, get it, and modify it:

function appendRule(sheet) {
  var len = sheet.cssRules.length;
  sheet.insertRule('*{}', len);
  return sheet.cssRules[len];
}
var rule = appendRule(document.styleSheets[0]);
rule.selectorText = '.selector';
rule.style.display = 'block';
rule.style.color = 'red';

<span class="selector">I should become red.</span>
<span>I should be at the next line and not become red.</span>

However, modifying selectorText does not seem to work on Firefox.

answered Jun 29, 2015 at 22:01

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

4 Comments

blex Over a year ago

According to the duplicate question's answer, you should use var cssRuleCode = document.all ? 'rules' : 'cssRules'; to make it work in Firefox too.

Oriol Over a year ago

@blex I think that is for ancient IE. Firefox supports cssRules, but the selectorText setter does not seem to work.

brunoais Over a year ago

This would be the accepted answer if it wasn't for the unimplemented code on firefox's side ...

brunoais Over a year ago

Firefox has finally implemented the API

Okku · Accepted Answer · 2015-06-29 21:56:50Z

2

You could append a new style element to your head and just append rules to it:

function addStyle(newRules){
    if(document.getElementById("jsAddedRules")){
        document.getElementById("jsAddedRules").innerHTML+=newRules;
    }else{
        var style=document.createElement("style");
        style.setAttribure("id","jsAddedRules");
        style.innerHTML=newRules;
        document.getElementsByTagName("head")[0].appendChild(style);
    }
}

And then just call your function when you want to add rules:

addStyle(
    ".selector{\
        display:block;\
        color:red;\
    }"
);

answered Jun 29, 2015 at 21:56

Okku

7,8744 gold badges33 silver badges43 bronze badges

1 Comment

brunoais Over a year ago

Yeah... it works... It is not well maintainable, though. If I want to change anything, it can become a mess because I still need to retain all values used or I need to parse CSS.

Collectives™ on Stack Overflow

Programatically create new CSS rules in a stylesheet

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest