¿Cómo recargar CSS sin recargar la página usando JavaScript?

Mientras trabajaba con CSS, es posible que se haya encontrado con situaciones en las que realizó algunos cambios en la hoja de estilo y tuvo que volver a cargar para ver los cambios reflejados en su navegador. O tal vez el estilo depende de alguna interacción del usuario y no desea recargar la página cada vez. A veces, no desea perder los cambios realizados con las herramientas de desarrollo y simplemente desea volver a cargar el CSS. Otras veces, el CSS se almacena en caché de manera tan obstinada que incluso actualizar toda la página no ayuda. Hoy aprenderemos cómo recargar el CSS sin recargar toda la página.

Con JavaScript, podemos agregar un nuevo número de versión a la ruta del archivo CSS como parámetro de consulta cada vez que actualice el CSS. Al agregar un parámetro de consulta diferente a una URL, el navegador lo maneja como una URL única y lo almacena en caché por separado, lo que le permite cargar la versión actualizada. Puede adjuntar esta función a un botón (o una combinación de teclas del teclado como acceso directo) que vuelve a cargar CSS cada vez que se hace clic en él. Podemos usar la fecha y hora actual como el número de versión, ya que siempre será una string nueva y única.

Sintaxis: Agregue el archivo CSS creado como el siguiente formato.

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

index.html con código JavaScript:

<!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>

Estilo de archivo 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;
}

Producción:

Puede agregar esta función como un marcador de JavaScript en su navegador que volverá a cargar el CSS cada vez que haga clic en él.

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

Publicación traducida automáticamente

Artículo escrito por ihsavru y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta