Reload CSS stylesheets with javascript

css, dom, html, javascript, jquery

Solution

In plain Javascript:

var links = document.getElementsByTagName("link");

for (var x in links) {
    var link = links[x];

    if (link.getAttribute("type").indexOf("css") > -1) {
        link.href = link.href + "?id=" + new Date().getMilliseconds();
    }
}

In jQuery:

$("link").each(function() {
    if $(this).attr("type").indexOf("css") > -1) {
        $(this).attr("href", $(this).attr("href") + "?id=" + new Date().getMilliseconds());
    }
});

Make sure you load this function after the DOM tree is loaded.

Problem

I want to reload all CSS stylesheets in a html page via javascript, without reloading the page. I need this only while developing to reflect css changes without refreshing the page all time. A possible solution is to add a `?id=randomnumber` suffix to the css hrefs with javascript, but I don't want to do that. I want to reload the stylesheet some way, without changing it's url, and the browser will decide if it needs to load a new version of that css or not (if server responds with a `304 - Not modified`). How to accomplish this?

Original source

Related problems