JQuery load multiple css

Question

I have a client website and he uses a lot of css files and I'm creating the css for mobile.

I have this script to decide what to load:

var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
if (agentID) {
//mobile
        $("link[rel=stylesheet]").attr({href : "includes/css/mobile.css"});
} else {
//desktop
        $("link[rel=stylesheet]").attr({href : "includes/css/cssLogin.css"});
        $("link[rel=stylesheet]").attr({href : "includes/css/magazine.css"});
    }

The thing is that when it is desktop it loads only the last magazine.css, the first (cssLogin.css) is replaced.

How do I load several css with jQuery?

Thanks a lot for your attention =]

score 2 · Accepted Answer · answered Nov 08 '11 at 17:23

2

You could append them to the head

$("head").append($("<link rel='stylesheet' href='style.css' type='text/css' />"));

answered Nov 08 '11 at 17:23

Marklar

1,056
2
13
31

Also have a look here - http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript It may be better to try to use "document.createStyleSheet('styles.css');" and fall back to the way I suggested – Marklar Nov 08 '11 at 17:27
Uncaught SyntaxError: Unexpected identifier – Nov 08 '11 at 17:31

JQuery load multiple css

1 Answers1