Question

I’ve a HTML markup and I’ve several CSS files with different properties assigned for the HTML elements which will act as the theme of the markup. Say the Markup is something like

<div id=main>
    <div>{More HTML elements, divs, spans etc}</div>
    <div>{More HTML elements, divs, spans etc}</div>
</div>

And the css is like

/*first.css*/
#main{
    someProperty: values;
}

#main div, #main ul li {
    someProperty: values;
}

Another css file

/*second.css*/
#main{
    someProperty: some other values;
}

#main div, #main ul li {
    someProperty: some other values;
}

There are more css files with different properties and values.

What I want to do is, at the click of a button, I want to change the CSS of the markup without changing the markup. So it will be something like

$('.btn').click(function(){
    var file = $(this).attr('id');
    //remove the previous css file
    //add the new css file (filename is the js var file+'.css')
});

I cannot keep doing $('#someId').css({ /* properties */}); as there are many properties in the CSS file.

So how do I best handle this??

Answer 1

I would say you can have single css with different properties you want to have in different classes. Whenever you want to change something. Just remove the current class using .removeClass() and add the new class using .addClass().

In case you want to switch the css files . Have a look here