Apply and remove a large CSS style section

advertisements

I would like to change the page style based on user preferences.

The page will load with a given style, but if the user clicks a button, the page layout should change. If he clicks again, the style should change back to the original style. The changes are large (about 70 CSS lines), but only change a specific part of the page.

I can write a JavaScript function that modifies the CSS styles for all the relevant tags, but that would be tedious and will introduce too much CSS into my code. I would rather keep it in the CSS file if I can.

I can also add styling A to the CSS file, with reference to class A in all the relevant tags and add style B to the CSS file, with reference to class B in all the relevant tags. Then the JavaScript code would just have to change the class on the relevant tags.

What is the best way to approach this?


To achieve this you could toggle the class on the body (or a more relevant parent object) and then amend your CSS to be based on this class. This way all the UI is affected by only 1 line of JS code. For example:

$('#foo').click(function() {
    $('body').toggleClass('foobar');
});

.example {
    background-color: red;
}

body.foobar .example {
    background-color: blue;
}