如何在不使用 JavaScript 重新加载页面的情况下重新加载 CSS？

在使用 CSS 时，您可能会遇到在样式表中进行了一些更改并且不得不重新加载以查看在浏览器中反映的更改的情况。或者样式可能取决于某些用户交互，并且您不希望每次都硬重新加载页面。有时您不想丢失使用开发工具所做的更改，而只想重新加载 CSS。其他时候，CSS 会被顽固地缓存，即使刷新整个页面也无济于事。今天我们将学习如何在不重新加载整个页面的情况下重新加载 CSS。

使用 JavaScript，我们可以在每次更新 CSS 时将新版本号附加到 CSS 文件路径作为查询参数。通过向 URL 添加不同的查询参数，浏览器将其作为唯一 URL 处理并单独缓存，从而允许您加载更新的版本。您可以将此函数附加到每次单击时重新加载 CSS 的按钮(或作为快捷方式的键盘组合键)。我们可以使用当前日期时间作为版本号，因为它始终是一个新的唯一字符串。

• 语法：添加创建的 CSS 文件，如下所示。

• 带有 JavaScript 代码的 index.html：

    
  
    
  
    
  
      GeeksforGeeks   
      Reloding CSS without relodaing the page
      
        
      
          Refresh CSS
      
        
      
          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);
                  }
              }
          }
      
  
    

• CSS 文件 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;
  }
  

• 输出：
  
• 您可以将此函数作为 JavaScript 书签添加到浏览器中，每次单击它时都会重新加载 CSS。

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