modify a css rule object with javascript
You could use the cssRules
on the DOM stylesheet object corresponding to your original stylesheet to modify your rule.
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
rules[0].style.color = 'red';
Note that IE uses rules
instead of cssRules
.
Here is a demonstration: http://jsfiddle.net/8Mnsf/1/
Just define your classes, and assign/remove classes to HTML elements with javascript.
Directly assigning style to an element, has highest priority, It will override all other CSS rules.
EDIT: you may want to use cssText property, see example here cssText property