modify a css rule object with javascript [duplicate]

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