How to load multiple CSS files within a JS script


Tags: javascript,css,if-statement,stylesheet,document.write

Problem :

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.



Solution :

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

    CSS Howto..

    How to make a CSS composite scalable

    How to make a box with arrow in CSS?

    How to remove the bottom border of a box with CSS

    How to dynamically positioning html table by using css properties?

    how to make the text in a div to not overflow its width

    How to change default message “Please enter a value with a valid mimetype.” for HTML file input

    How may I stack multiple html/css buttons vertically along the center of the page?

    How to set min-font-size in CSS

    background-image on divs aren't showing; the divs are collapsing instead

    How does Bootstrap Grid really work?

    Having Two HTML issues with PHP DOM: 1.) DOMDocument::createEntityReference $name values and 2.) how to add multiple CSS classes an element?

    How to style multiple instances differently of the same jquery control?

    How can I add fixed background just to this section? [demo included]

    How to change accordion css to plain white?

    How to put four images 2x2 on other image as background, CSS?

    How can I retrieve infos from PHP DOMElement?

    How to position a div that already has a float?

    How to Surround Links with Bounding Box Using CSS

    How can I align my HTML components with CSS?

    How to format a button with in Form tag, html?

    How to get global selector inside emulated view encapsulation (CSS / Angular2)

    How to tell what in CSS files that is not used? [duplicate]

    How To Create Full Screen Fixed With Scrolling Background Images

    How to add Get in Touch page in webpage? [closed]

    how to change negative sign position css

    How to make a vector background image in css instead of using jpg or png

    How to add and remove background images in css on clicking a link on page

    How do I select text after a

    tag, but before a nested tag?

    How to put some divs in a row?

    How to create a DIV style switcher in JavaScript?