Adding Stylesheet with jQuery

Question

I have read up on it and it seems like the best method to add a stylesheet using jQuery is the following:

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

Now what I would like to do, is switch between different themes using this method:

<script type="text/javascript">
      $(document).ready(function () {
          if($('body').hasClass('pink'))
          {
              $('head').append('<link rel="stylesheet" type="text/css" href="../css/mystylePink.css">');
          }
          else
          {
              $('head').append('<link rel="stylesheet" type="text/css" href="../css/mystyle.css">');
          }
      });
</script>

MY QUESTION: Apart form users not having javascript enabled, what complications/issues exists when loading a stylesheet like this? IE? Mobile browsers? Since I actually want to use this on a mobile site...

ahren · Accepted Answer · 2013-03-25 13:24:19Z

2

The main problem here would be the flash of unstyled content while the stylesheet loads, rather than IE or mobile browsers.

I suggest you use a CSS preprocessor (SASS, LESS) and just use one stylesheet with your normal styles and then override with the .pink class underneath.

.myClass{
  color: white;
  background: black;
}

.pink .myClass{
  color: pink;
  background: grey;
}

edited Mar 25, 2013 at 13:24

answered Mar 25, 2013 at 13:15

ahren

17k5 gold badges52 silver badges70 bronze badges

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

3 Comments

David Van Staden Over a year ago

yeah I agree, thank you. Problem is that I have have many styles that do not use classes and uses element targeting: eg #wrapper ul li a{}, and I do not want to add styles to my existing html elements. So what I can do, is load a stylesheet to start of with, and then replace it with another one once the document is ready....Then of course there is preloading with window.onload - show a loading gif while everything is loading

ahren Over a year ago

SASS/LESS will take care of specific element targeting.

David Van Staden Over a year ago

ok cool, i see thank you...What about compatibility other than IE? Is it reliable and safe to use my method?

Community · Accepted Answer · 2017-05-23 11:51:21Z

1

This method isnt't working in IE8 and below.

You have to use another method, like IEss document.createStyleSheet() method.

See this discussion for more information: Can I load external stylesheets on request?

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Mar 25, 2013 at 13:16

Julian

614 bronze badges

Collectives™ on Stack Overflow

Adding Stylesheet with jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related