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
– Esailija, Commented Mar 22, 2012 at 22:09

TJS101 · Accepted Answer · 2013-10-15 13:53:32Z

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.

Community · Accepted Answer · 2017-05-23 12:20:14Z

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, 2017 at 12:20

CommunityBot

11 silver badge

answered Mar 22, 2012 at 22:17

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

3 Comments

brickBreaker Over a year ago

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!

Bergi Over a year ago

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.

brickBreaker Over a year ago

there is only one thing to say about internet explorer: 9gag i guess, innerHTML wouldn't work - after all it's css.

Neil · Accepted Answer · 2012-03-22 22:16:11Z

0

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.

answered Mar 22, 2012 at 22:16

Neil

55.5k8 gold badges65 silver badges74 bronze badges

Comments

Skempi · Accepted Answer · 2012-03-22 22:09:17Z

-1

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

answered Mar 22, 2012 at 22:09

Skempi

1

Collectives™ on Stack Overflow

changing css class model using JavaScript

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related