CODEWITHSUNDEEP
jqueryhtmlcssstylesheet
Alex
Alex

Reputation: 68492

Replace stylesheet with jQuery

The replacement is done in real time - user clicks something, the style changes:

$('link#mystyle').attr('disabled', 'disabled');
$('link#mystyle').remove();

if(new_style){
  $('head').append('<link rel="stylesheet" id="mystyle" href="' 
                    + new_style +'.css" type="text/css" />');

}

The problem is that by default there is a inline style block after the stylesheet link:

<style>
  ...
</style>

And my code above will remove the original stylesheet, and append the new stylesheet after the style block, so the new stylesheet will override some rules from the style block.

I don't want that, so can I somehow append my new style in the same place, so the rules inside the new stylesheet are applied with the same priority as the initial stylesheet rules?

Upvotes: 1

Views: 1868

Answers (2)

ehudokai
ehudokai

Reputation: 1926

@Kroehre is right, but if you insist on doing it your way there is the http://api.jquery.com/replaceWith/ method.

$('link#mystyle').replaceWith('<link rel="stylesheet" id="mystyle" href="' 
                + new_style +'.css" type="text/css" />');

should do what you want.

Upvotes: 2

kroehre
kroehre

Reputation: 1104

A better solution would be to format your css to vary based on a high level class or id on the body tag:

/*Style 1*/
body.style1 h1{...}
body.style1 ...

/*Style 2*/
body.style2 h1{...}
body.style2 ...

Then, all you have to do is change the class on the body tag:

$('#something-to-click').click(function(){
  ($('body').hasClass('style1')){
    $('body').addClass('style2').removeClass('style1');
  }else{    
    $('body').addClass('style1').removeClass('style2');
  }
});

Upvotes: 6

Related Questions