How to reload CSS without reloading the page using JavaScript ? Last Updated : 02 Jun, 2020 Comments Improve Suggest changes Like Article Like Report 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: 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: 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); } } })(); Comment More infoAdvertise with us Next Article How to reload CSS without reloading the page using JavaScript ? I ihsavru Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to modify URL without reloading the page using JavaScript ? In this article, we are going to see how to modify URL without reloading the page using JavaScript Below are the methods to modify the URL without reloading the page using JavaScript: Table of Content Replacing the current state with replaceState() MethodAdding a new state with pushState() MethodMet 3 min read How to read CSS rule values with JavaScript? DOM (Document Object Model) object can read and manipulate CSS rules. We can use the following approaches to read all the Embedded CSS rules using JavaScript. Using getElementsByTagName() MethodUsing window.getComputedStyle() MethodApproach 1: Using the getElementsByTagName() MethodUse document.getE 3 min read How to remove CSS property using JavaScript? To remove CSS property using JavaScript, we have different methods. In this article, we will learn how to remove CSS property using JavaScript. Below are the Methods used to remove CSS property using JavaScript: Table of Content Using CSS removePropertyUsing the setProperty methodMethod 1: Using CSS 2 min read How to refresh a page using selenium JavaScript ? Selenium is a tool with the help of it, we can perform automation testing in web browsers. According to the official documentation of Selenium - Selenium can automate anything present on the web. Automation scripts in Selenium can be written in multiple programming languages like C#, JavaScript, Jav 2 min read How to load CSS files using JavaScript? The CSS file is used to describe how HTML elements will be displayed. There are various ways to add CSS files to the HTML document. JavaScript can also be used to load a CSS file in the HTML document. Approach:Use the document.getElementsByTagName() method to get HTML head element.Create a new link 2 min read How to Remove and add Style with .css() Function using JavaScript? There are many cases, especially as the content gets more interactive, where the developer wants styles to dynamically kick in based on user input, some code having run in the background, and more. In these sorts of scenarios, the CSS model involving style rules or inline styles doesn't help. The so 3 min read How to Display Changed Browser URL Without Reloading Through alert using JavaScript ? To change the URL in the browser without loading the new page, we can use history.pushState() method and replaceState() method from JavaScript. To display the browser-URL before changing the URL we will use window.location.href in the alert() function and will use again after changing the browsers-U 1 min read How to add CSS Rules to the Stylesheet using JavaScript ? In this example, we will see how to add CSS rules to the stylesheet element using JavaScript. First, we will create an HTML document and then add some CSS rules using JavaScript. Syntax: let styleText = document.getElementById('GFG').sheet; let st = `.box { width: 100px; height: 100px; }`; styleText 2 min read How to remove CSS style of <style> tag using JavaScript/jQuery ? Given an HTML document containing inline and internal CSS and the task is to remove the style of <style> tag. The internal or embedded CSS is used within the head section of the HTML document. It is enclosed within <style> tag. Approach: The jQuery remove() and empty() methods are used t 2 min read How to reload or re-render the entire page using AngularJS? While working with AngularJS we might come across a time when we want our user to switch contexts and re-render everything again.AngularJS provides a method by which we can re-render or even reload the entire page. So in this article, we will see how we can reload the route instead of just reloading 2 min read Like