How to reload CSS without reloading the page using JavaScript ?

While working with CSS, you might have come across situations where you made some changes in the stylesheet and had to do a hard reload to see the changes reflected in your browser. Or maybe the style depends on some user interaction and you don’t wish to hard reload the page every time. Sometimes you don’t want to lose the changes made using the Dev Tools and simply wish to reload the CSS. Other times the CSS is so stubbornly cached that even refreshing the entire page doesn’t help. Today we will learn how to reload the CSS without reloading the entire page.

Using JavaScript, we can append a new version number to the CSS file path as a query parameter every time you update the CSS. By adding a different query parameter to a URL, the browser handles it as a unique URL and caches it separately allowing you to have the updated version loaded. You can attach this function to a button (or a combination of keyboard keys as a shortcut) that reloads CSS every time it is clicked. We can use the current date-time as the version number since it will always be a new and unique string.

Syntax: Add the created CSS file like the below format.

<link rel="stylesheet" type="text/css" href="css/style.css?version=#">

index.html with JavaScript code:

<!DOCTYPE html> 

<html> 

<head> 

  <link rel="stylesheet" type="text/css"

            href="style.css"/> 

</head> 

<body> 

    <h1>GeeksforGeeks</h1>    

    <b>Reloding CSS without relodaing the page</b> 

    <br><br> 

    <button onclick="refreshCSS()"> 

        Refresh CSS 

    </button> 

    <script> 

        refreshCSS = () => { 

            let links = document.getElementsByTagName('link'); 

            for (let i = 0; i < links.length; i++) { 

                if (links[i].getAttribute('rel') == 'stylesheet') { 

                    let href = links[i].getAttribute('href') 

                                            .split('?')[0]; 

                    let newHref = href + '?version='  

                                + new Date().getMilliseconds(); 

                    links[i].setAttribute('href', newHref); 

                } 

            } 

        } 

    </script> 

</body> 

</html>

CSS file style.css:

/* Coloring h1 tag */

h1 { 

    color: green; 
} 
/* Button styling */
button { 

  width: 200px; 

  background-color: purple; 

  color: black; 

  border-radius: 10px; 

  padding: 10px; 

  font-weight: bold; 
} 

Output:

You can add this function as a JavaScript bookmarklet in your browser which will reload the CSS every time you click on it.

javascript:(function(){
  let links = document.getElementsByTagName('link');
      for (let i = 0; i < links.length; i++) {
          if (links[i].getAttribute('rel') == 'stylesheet') {
        let href = links[i].getAttribute('href').split('?')[0];
              let newHref = href + '?version=' 
                           + new Date().getMilliseconds();
              console.log(newHref)
              links[i].setAttribute('href', newHref);
          }
      }
})();

Article Tags :

JavaScript

Web Technologies

JavaScript-Questions