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-08T17:05:09.593

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 08 '11 at 17:05

answered Dec 08 '11 at 16:43

Sudhir Bastakoti

99,167
15
158
162

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('');} else{loadcssfile(site.css);}}' – John Vasiliou Dec 08 '11 at 16:59
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. – John Vasiliou Dec 08 '11 at 17:01
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 – Sudhir Bastakoti Dec 08 '11 at 17:05
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. – John Vasiliou Dec 08 '11 at 17:23

score 1 · Answer 2 · answered Dec 08 '11 at 16:43

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);
}

score 0 · Answer 3 · answered Dec 08 '11 at 16:55

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 08 '11 at 16:55

Zdeněk Mlčoch

722
6
17

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. – John Vasiliou Dec 08 '11 at 17:04

How to load multiple CSS files within a JS script

3 Answers3