Search code examples
jquerycssloadstylesheet

$.getScript, but for stylesheets in jQuery?

Is there a $.getScript equivalent in jQuery, but for loading stylesheets?

Solution

  • 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.