use jQuery to replace a CSS stylesheet if body class changes

Question

I have a stylesheet in my head as follows:

<link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css">

I am trying to replace the above stylesheet with the follow ones if the body#main.whatever class changes (on different pages for example).

i.e.

changing from: body#main.itemid113

to: body#main.itemid114

<script>
jQuery(document).ready(function() {

   $('body#main.itemid113').replaceWith('<link rel="stylesheet" id="main" href="/templates/jooswatch-v3-5/css/bootswatch/cerulean/bootstrap.min.css" type="text/css" />');

   $('body#main.itemid114').replaceWith('<link rel="stylesheet" id="main" href="/templates/jooswatch-v3-5/css/bootswatch/cosmo/bootstrap.min.css" type="text/css" />');

});
</script>

How would I do this - the above is not working.

Would this be correct?

jQuery(function($){
    if ($('.itemid113').length){
        $('body').append("<link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/cerulean/bootstrap.min.css" type="text/css" />");
    };
    if ($('.itemid114').length){
        $('body').append("<link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/cosmo/bootstrap.min.css");
    }
});

The second wouldn't be correct? You have to replace some quotes. And if you want to replace a stylesheet, you need to remove the original one or replace it ;) — putvande
– putvande, Commented Dec 6, 2014 at 12:46
Well, I don't know what stylesheet you want to replace but you could try something like $('link#whateverid').replaceWith('<link rel="stylesheet"..../>') — putvande
– putvande, Commented Dec 6, 2014 at 12:51
Have I not done that already above with my second bit of code? — user3544484
– user3544484, Commented Dec 6, 2014 at 12:53
Are you stylesheets in the body tag? Try putting a space between body and #main. — putvande
– putvande, Commented Dec 6, 2014 at 12:54

rdubya · Accepted Answer · 2014-12-06 12:52:21Z

1

The easiest way to accomplish this is to add an id to your link tag i.e.:

<link id="theme" rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css">

Then your script becomes:

jQuery(function($){
    if ($('.itemid113').length){
        $('#theme').attr("href","/templates/jooswatch-v3-5/css/bootswatch/cerulean/bootstrap.min.css");
    };
    if ($('.itemid114').length){
        $('#theme').attr("href", "/templates/jooswatch-v3-5/css/bootswatch/cosmo/bootstrap.min.css");
    }
});

answered Dec 6, 2014 at 12:52

rdubya

2,9261 gold badge18 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

use jQuery to replace a CSS stylesheet if body class changes

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related