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.

Answer 1

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