Changing CSS properties using jQuery for a markup and different CSS files

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??

Abdul Kader · Accepted Answer · 2011-06-02 07:24:57Z

2

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

answered Jun 2, 2011 at 7:24

Abdul Kader

5,8324 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kapa · Accepted Answer · 2011-06-02 07:28:33Z

1

You can easily remove link elements from the head with jQuery, they are treated as any other HTML element.

You can remove a certain CSS file from the document using:

$('link[href="fos.css"]').remove();

And then you can add another into the head:

var newCss='fos2.css';
$('head').append('<link rel="stylesheet" type="text/css" href="'+newCss+'">');

or if you want to play nice:

var newCss='fos2.css';
$('<link>')
    .attr({
        rel: 'stylesheet',
        type: 'text/css',
        href: newCss
    })
    .appendTo('head');

I've created a simple jsFiddle test case for you.

answered Jun 2, 2011 at 7:28

kapa

78.9k21 gold badges166 silver badges178 bronze badges

Comments

Rupin · Accepted Answer · 2011-06-02 07:27:06Z

0

Keep information about layout independent of the color, images etc.If possible, create one css styling for body tag which has information of color in it.

answered Jun 2, 2011 at 7:27

Rupin

6207 silver badges24 bronze badges

Collectives™ on Stack Overflow

Changing CSS properties using jQuery for a markup and different CSS files

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related