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 🙂

Answer 1

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 🙂