changing css class model using JavaScript

Question

Is it in any way possible, to change a css class model using JavaScript?

Pseudo code:

function updateClass(className, newData) {
    cssInterface.alterClass(className, newData);
}

className being the name of the class, which is supposed to be changed (like ".footer") and newData being the new class content (like border: "1px solid pink;").

The target is, actually, just to save space: I am working with CSS3-animations, so changing one attribute of an element, which is affected by it's class, will terminate the animation of of it - The (in my case) font size won't change anymore. Using different classes will require an entire new set of classes for all affected elements, I'd like to avoid this.

I am not searching for a change via

element.className = "foo";

or

element.style.fontSize = "15pt";

Thanks for your help, guys :)

Yes if you know which stylesheet the rule is in (well you could just iterate over all of them I guess) and that stylesheet is hosted by sameDomain — Esailija, Mar 22 '12 at 22:09

score 1 · Answer 1 · answered Oct 15 '13 at 13:53

Here's my function to do this...

    function changeCSS(typeAndClass, newRule, newValue)     // modify the site CSS (if requred during scaling for smaller screen sizes)
{
    var thisCSS=document.styleSheets[0]                                 // get the CSS for the site as an array
    var ruleSearch=thisCSS.cssRules? thisCSS.cssRules: thisCSS.rules    // work out if the browser uses cssRules or not
    for (i=0; i<ruleSearch.length; i++)                                 // for every element in the CSS array
    {
        if(ruleSearch[i].selectorText==typeAndClass)                    // find the element that matches the type and class we are looking for
        {
            var target=ruleSearch[i]                                    // create a variable to hold the specific CSS element
            var typeExists = 1;
            break;                                                      // and stop the loop
        }
    }
    if (typeExists)
    {
        target.style[newRule] = newValue;                                   // modify the desired class (typeAndClass) element (newRule) with its new value (newValue).
    }
    else
    {
        alert(typeAndClass + " does not exist.");
    }
}

Called with (example)

changeCSS("div.headerfixed","-moz-transform-origin", "100% 0%");

hope this helps.

score 0 · Answer 2 · answered Mar 22 '12 at 22:16

As far as I can tell the CSS object model cannot easily tell you whether you already have an existing style rule for a particular class, but you can easily append a new rule for that class and it will override any previous declaration of that style.

I found an example of creating dynamic stylesheets.

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

See my answer here. To answer your question: Yes, it's possible.

@CSS3: I tried exactly the same in one of my html5 experiments. I created an extra <style> element, and changed its contentText to the CSS class definitions I needed. Of course changing the cssRule object would be much cleaner :-)

edited May 23 '17 at 12:20

Community

1
1

answered Mar 22 '12 at 22:17

Bergi

630,263
148
957
1,375

it's actually the `innerText`-attribute of the style-element (which, to complete the answer can be accessed using an id or whatever), but it worked - thanks a lot! – brickBreaker Mar 23 '12 at 22:26
Right, that attribute seems to be browser-dependent. IE seems to need `styleSheets.cssText`, others are lucky with TextNodes. Haven't tried `innerHTML`/`innerText` yet. – Bergi Mar 27 '12 at 17:41
there is only one thing to say about internet explorer: [9gag](http://9gag.com/gag/104588) i guess, `innerHTML` wouldn't work - after all it's css. – brickBreaker Mar 28 '12 at 20:35

score -1 · Answer 4 · answered Mar 22 '12 at 22:09

You should take a look at dojo, it has some nice features where you can do just that..

require(["dojo/dom-class"], function(domClass){
    // Add a class to some node:
    domClass.add("someNode", "anewClass");
});

http://dojotoolkit.org/reference-guide/1.7/dojo/addClass.html

changing css class model using JavaScript

4 Answers4