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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    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>

    chevron_right

    
    

  • CSS file style.css:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    /* Coloring h1 tag */
    h1 {
        color: green;
    }
    /* Button styling */
    button {
      width: 200px;
      background-color: purple;
      color: black;
      border-radius: 10px;
      padding: 10px;
      font-weight: bold;
    }

    chevron_right

    
    

  • 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);
              }
          }
    })();
    

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Akanksha_Rai