How to load CSS using jquery

Question

I uploaded the css file to the server, so I have a url with me. How can I load it in my Perl code using jQuery?

So, I am currently hard coding css on my mason page which is not on the page, something like this

JQ.onReady('show', function(){ JQ.addStyles({styles: ["\n\n.ap_classic { border-top:1px solid #ccc;border-left:1px solid #ccc;border-bottom:1px solid #2F2F1D; border-right:1px solid #2F2F1D;background-color:#EFEDD4;padding:3px; } .ap_classic .ap_titlebar { color:#86875D;font-size:12px;padding:0 0 3px 0;line-height:1em; } .ap_classic .ap_close { float:right; } .ap_classic .ap_content { clear:both;background-color:white;border:1px solid #ACA976;padding:8px;font-size:11px; } "]}); }); 

I want to avoid hardcoding this css?

Answer 1

I don’t understand why you can’t just insert the <link/> element into the <head/> section, but here is the jQuery fragment:

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

Answer 2

Again, according to Dynamic loading CSS stylesheet does not work in IE .

You need to set the last href attr value and only after adding the elem element to the head:

 $('<link>') .appendTo('head') .attr({ type: 'text/css', rel: 'stylesheet', href: '/css/your_css_file.css' });