How to Dynamically Load a CSS File Using jQuery

Dynamically loading a CSS file using jQuery allows you to inject stylesheets on the fly to support theme switching, load styles only when specific components are used, or optimize initial page load times. This guide explains how to append a stylesheet link element to your document's head, swap existing stylesheets, and detect when the dynamic CSS has finished loading.

Appending a New Stylesheet to the <head>

The standard way to load a CSS file with jQuery is to create a <link> element with the necessary attributes and append it to the document's <head>.

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

Alternatively, you can write the element directly as an HTML string:

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

Both methods instruct the browser to fetch and apply the CSS rules immediately upon insertion.

Replacing an Existing Stylesheet

If you are implementing a feature like a theme switcher (for example, switching between light and dark modes), you should replace an existing stylesheet rather than continually appending new ones. Give your <link> tag an id attribute, then update its href:

<!-- Initial HTML in the <head> -->
<link id="dynamic-theme" rel="stylesheet" type="text/css" href="light-theme.css">

// Switch to a new stylesheet dynamically
$('#dynamic-theme').attr('href', 'dark-theme.css');

This prevents duplicate stylesheets from conflicting and keeps the DOM clean.

Executing Code After the CSS Loads

If your JavaScript needs to wait until the new styles are applied before calculating element dimensions or displaying hidden content, attach a load event listener to the created <link> element:

$('<link>', {
    rel: 'stylesheet',
    type: 'text/css',
    href: 'path/to/your/stylesheet.css'
})
.on('load', function() {
    console.log('Stylesheet has successfully loaded.');
})
.appendTo('head');

Preventing Duplicate CSS Injections

To avoid injecting the same stylesheet multiple times when triggering actions repeatedly, check if the file is already referenced before appending:

function loadCSS(url) {
    if (!$('link[href="' + url + '"]').length) {
        $('<link>', {
            rel: 'stylesheet',
            type: 'text/css',
            href: url
        }).appendTo('head');
    }
}

// Usage
loadCSS('path/to/your/stylesheet.css');