The easiest way to do this that I have found is to set a class in the
tag and use one CSS file, but defining two sets of CSS definitions, prefixing each set with a class name.
Set a default class (e.g.,
) and then, when you want to change the look, you simply update the class to the other class using JavaScript.
The benefits of this are that, all classes are loaded at page load and any common styles can be coded outside of the "class specific" definitions.
Example:
body {...}
a {...}
div {font-weight: bold;}
.bodyClass1 div {font-size: 10px;}
.bodyClass2 div {font-size: 12px;}