How To Get Css Class By Name From Stylesheet?

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 >= 0; s--) {

Solution 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).

functionCssManipulator (sheetTitle) {
    var that = this,                        // A reference to an instance
        len = document.styleSheets.length,  // Caches the length of the collection
        n;                                  // General loop counterthis.styleSheet = null;                 // Stores the stylesheet for the instancethis.selectors = {};                    // Stores the selectors we've handledthis.cssRules = null;                   // Caches cssRules of the given stylesheet// Search the given stylesheet by title and assign it and its cssRules to instance propertiesfor (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 selectorthis.change = function (selector, prop, value) {
        // FF knows only camel-cased propertynames, hence camel-casing the propNamevar 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.

Solution 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.

Solution 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{}.

<styletype="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.