$.getScript, but for stylesheets in jQuery?
you can use same method $.getScript to "download" style sheet, since $.getScript actually is just another HTTP request. but it will be a bit wired since css is not executable.
CSS is not a script, so you dont have to "execute" it in the sense of script execution.
Basically a <link>
tag created on the fly and appended to the header should suffice, like
$('<link/>', {
rel: 'stylesheet',
type: 'text/css',
href: 'path_to_the.css'
}).appendTo('head');
or
var linkElem = document.createElement('link');
document.getElementsByTagName('head')[0].appendChild(linkElem);
linkElem.rel = 'stylesheet';
linkElem.type = 'text/css';
linkElem.href = 'path_to_the.css';
if you want to do it without jQuery.
The browser will respond to the change in the DOM and update your page layout accordingly.
EDIT:
I have read that old Internet Explorer has trouble with this, and you might need to do it like in answer to make it work:
https://stackoverflow.com/a/2685639/618206
EDIT2:
Reading the file content and putting it inline (between <style>
tags) is also a valid solution, but that way the CSS will not be cached by the browser.
I have created an alternative to $.getScript
that handles stylesheets. I called it $.getStylesheet for obvious reasons.
It implements the $.Deferred
object, which means you can chain things like so:
$.when($.getStylesheet('css/main.css'), $.getScript('js/main.js'))
.then(function () {
console.log('the css and js loaded successfully and are both ready');
}, function () {
console.log('an error occurred somewhere');
});
Here is the little function for $.getStylesheet. It is just hosted on Github gist, so I can update it if I need to.