Load different CSS stylesheet with javascript

Question

I need to use javascript to load a different stylesheet based on a URL variable that is being passed.

The scenario is this: We need to maintain a mobile website wi

Answer 1

You should never try to close the document when you use inline script. document.close is only needed if you document.write to an iframe, frame or new window

Also I suggest you test the location.search rather than the href since that is where you placed the flag.

Please try

<script language="javascript" type="text/javascript">
if (location.search.indexOf('app=true') > -1) {
  document.write('<link rel="stylesheet" type="text/css" href="http://blog.meetcody.com/wp-content/themes/standard/appstyle.css" />');
}
</script>

and possibly place that script AFTER the other stylesheets, if you want to override stuff set in one of your 10+ sheets at your site, or better: test the query string on the server, or where you set the query string to app=yes, set something in the session or similar and use that to include the correct css on the server instead of relying on JS

PS: Your body tag has the classes of home and blog on your homepage. I suggest you look to the above mentioned stylesheets and see what the colour is in those for those classes.

PPS: I do not see any media detection here

<link rel='stylesheet' id='standard-activity-tabs-css'  href='/wp-content/themes/standard/lib/activity/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='gcse-widget-css'  href='/wp-content/themes/standard/lib/google-custom-search/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-300x250-widget-css'  href='/wp-content/themes/standard/lib/standard-ad-300x250/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-125x125-widget-css'  href='/wp-content/themes/standard/lib/standard-ad-125x125/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-468x60-css'  href='/wp-content/themes/standard/lib/standard-ad-billboard/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-personal-image-widget-css'  href='/wp-content/themes/standard/lib/personal-image/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-influence-css'  href='/wp-content/themes/standard/lib/influence/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='/wp-content/themes/standard/css/lib/bootstrap.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-responsive-css'  href='/wp-content/themes/standard/css/lib/bootstrap-responsive.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-css'  href='/wp-content/themes/standard/style.css?ver=3.4.2' type='text/css' media='all' />

Answer 2

You can add a CSS stylesheet by using appendChild() like this:

 var header = $.getElementsByTagName('head')[0];
 var styleSheet = $.createElement('link');
 styleSheet.rel = 'stylesheet';
 styleSheet.type = 'text/css';
 styleSheet.href = 'style.css'; // name of your css file
 styleSheet.media = 'all';
 header.appendChild(styleSheet);

Of course you could change this example to accomodate different css file names depending on the current URL by doing something like this:

 styleSheet.href = (isMobile == true) ? 'mobile.css' : 'default.css';