How to get CSS class by name from StyleSheet?

Question

I have the following code which uses the index to get stylesheet and also css class inside that stylesheet.

 for (var s = document.styleSheets.length - 1; s         


        

Answer 1

Here's a snippet you can use to create new rules and manipulate existing rules in a stylesheet. A particular sheet is recognized by its title, so you need to give unique titles to those stylesheets you want to manipulate (add title attribute to corresponding link or style tags).

function CssManipulator (sheetTitle) {
    var that = this,                        // A reference to an instance
        len = document.styleSheets.length,  // Caches the length of the collection
        n;                                  // General loop counter
    this.styleSheet = null;                 // Stores the stylesheet for the instance
    this.selectors = {};                    // Stores the selectors we've handled
    this.cssRules = null;                   // Caches cssRules of the given stylesheet
    // Search the given stylesheet by title and assign it and its cssRules to instance properties
    for (n = 0; n < len; n++) { 
        if (document.styleSheets[n].title === sheetTitle) {
            this.styleSheet = document.styleSheets[n];
            this.cssRules = document.styleSheets[n].cssRules || document.styleSheets[n].rules;
            break;
        }
    }
    // Changes properties of the given selector
    this.change = function (selector, prop, value) {
        // FF knows only camel-cased propertynames, hence camel-casing the propName
        var propName = (prop.charAt(0) === '-') ? prop.substring(1, prop.length) : prop;        
        propName = propName.replace(/-([a-z])/gi, function(str, chr) {
            return chr.toUpperCase();
        }); 
        if (selector in that.selectors) { // Change the rule, if we've handled this selector before
            that.styleSheet.cssRules[that.selectors[selector]].style[propName] = value;
        } else { // Add a new rule if we haven't met this selector before
            that.selectors[selector] = that.styleSheet.insertRule(selector + '{' + prop + ':' + value + ';}', that.cssRules.length);
        }
    };
}

selectors contains the magic, it stores the index of the newly-created rule returned by insertRule.

Usage

Create an instance of CssManipulator for every stylesheet you want to change like this:

pageSheet = new CssManipulator('title_of_the_stylesheet');

Then you can manipulate most of the rules in a stylesheet (pseudo-elements can't be manipulated with this code) by calling object's change method:

pageSheet.change('.some_selector', 'property-name', 'value_for_the_property');

This method adds a new selector once, nevertheless if the passed selector exists in the original stylesheet or not. Notice, that if you change a property name like background-color, you need to pass "hyphen-mode" of the property name to the method.

You can develope the object further, for example change method could be easily changed to accept more than one property-value pair per call.

Answer 2

var someVar = document.querySelectorAll('.someClass');
for(var i=0; i<someVar.length; i++){
someVar[i].style.background = 'powderBlue';}

This will grab all of the elements with the class 'someClass' and change the background color.

Answer 3

If I understands correctly, you want to change CSS. Precisely you want to change CSS rules for a class. To do so, and to be the most performance efficient, I would create a stylesheet with your selectors, it might be just .selector>div{} for example or just .selector{}.

<style type="text/css">.squerify>tr{height:60px;}</style>

I used this a while ago to make my table cells square (while my cells was all equal).

Then I used this code to change parameters of the class in the stylesheet.

document.styleSheets[0].cssRules[numberOfSelector].style.height=document.querySelector('.squerify td').offsetWidht+"px";

This was the best way I could think of, but if you want, you could use a loop to search for the classes.
Send a comment if misunderstood your question.