How to reload CSS without reloading the page using JavaScript ? - GeeksforGeeks

02 Jun, 2020
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=#">
<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>
<!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;}
/* 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);
          }
      }
})();

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

Akanksha_Rai
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to position a div at the bottom of its container using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
Types of CSS (Cascading Style Sheet)
How to Insert Form Data into Database using PHP ?