How to load multiple CSS files within a JS script

Question

Below I have a nested if statement which loads a certain CSS file depending on a users device. I also have a style sheet switcher which needs the CSS files to be loaded if a certain device is being used.

if(navigator.userAgent.match(/Windows NT/i)){
if(window.innerWidth < 816){document.write('<link rel="stylesheet" type="text/css" href="ui/tablet/css/site.css">');}
else{document.write('<link rel="stylesheet" type="text/css" href="ui/root/css/site.css title="default"><link rel="alternate stylesheet" type="text/css" href=""ui/root/css/reverse.css" title="reverse"/>');}}

The problem lies with the last line. I am trying to 'load' not write multiple CSS files when a page is loaded. I need there to be multiple CSS files loaded as I have a style sheet switcher and it depends on the CSS files which are basically pre-loaded.

I obviously cannot use document.write with multiple CSS files like the above code. I also shouldn't be using document.write anyway because if a user does change the style sheet, on a refresh it will write an older CSS file anyway.

I have tried being as clear as possible but I'm basically working with many different devices here and also allowing users the opportunity to change style sheets. Risky, I know!

Is there anyway I can change the document.write to something like document.load? Or is there no possible way of loading multiple style sheets depending on a users device?

Thanks, John.

Sudhir Bastakoti · Accepted Answer · 2011-12-08 17:05:09Z

6

Something like this will help:

var cssFilesArr = ["first.css", "second.css"];
function loadcssfile(cssFilesArr){
for(var x = 0; x < cssFilesArr.length; x++) {
  var fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", cssFilesArr[x]);
  document.getElementsByTagName("head")[0].appendChild(fileref);
 }
}
loadcssfile(cssFilesArr) ////dynamically load and add this css file

edited Dec 8, 2011 at 17:05

answered Dec 8, 2011 at 16:43

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

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

4 Comments

John Vasiliou Over a year ago

How would I go about adding multiple CSS files though? Would I just keep repeating the loadcssfile() method? Also what about referencing from another location? 'else if(window.innerWidth < 816){document.write('<link rel="stylesheet" type="text/css" href="ui/tablet/css/site.css">');} else{loadcssfile(site.css);}}'

John Vasiliou Over a year ago

Just tried this method and it doesn't seem to work unfortunately. I've written it the way I posted the above comment and just moved site.css to the same location as the script I'm using.

Sudhir Bastakoti Over a year ago

edited, you can just place the css files (full path) in array and loop thru it just in edited code above.. Hope it works for you as it worked for me

John Vasiliou Over a year ago

I got it to work, BUT, I've found a few niggles with it. It always writes the LAST CSS file in the Array. It also made a hybrid out of two of my CSS files and wrote it to my website. so I had half of the second CSS file in the Array and half of the last CSS file in the Array. Very weird but nearly there, also how would i allow a user to change a style sheet using this method? Before it was always depending on the CSS title (title="default" or title="reverse"). Any ideas would be very helpful! Thanks again.

ioseb · Accepted Answer · 2011-12-08 16:43:11Z

1

I think you can add stylesheets to documents <head> element directly like this:

var head = document.getElementsByTagName('head')[0];
var files = ['/path/to/file1.css', '/path/to/file2.css', '/path/to/file3.css'];

for (var i = 0, l = files.length; i < l; i++) {
  var link = document.createElement('link');
  link.href = files[i];
  link.rel = "stylesheet";
  link.type = "text/css";

  head.appendChild(link);
}

answered Dec 8, 2011 at 16:43

ioseb

17k3 gold badges37 silver badges31 bronze badges

Comments

Zdeněk Mlčoch · Accepted Answer · 2011-12-08 16:55:28Z

0

You can add an id attribute for your style, like this:

<link id="css" rel="stylesheet" type="text/css" href="css1.css">

So if you want to switch, you can use:

document.getElementById("css").href="css2.css";

answered Dec 8, 2011 at 16:55

Zdeněk Mlčoch

7526 silver badges17 bronze badges

1 Comment

John Vasiliou Over a year ago

What about the initial CSS load though? If I leave it as it is (document.write) it will forever be overwriting the cookie and changing the style sheet to the initial one.

Collectives™ on Stack Overflow

How to load multiple CSS files within a JS script

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related