Как перезагрузить CSS без перезагрузки страницы с помощью JavaScript?

Опубликовано: 11 Декабря, 2021

При работе с CSS вы могли столкнуться с ситуациями, когда вы внесли некоторые изменения в таблицу стилей и вам пришлось выполнить жесткую перезагрузку, чтобы увидеть изменения, отраженные в вашем браузере. Или, может быть, стиль зависит от некоторого взаимодействия с пользователем, и вы не хотите каждый раз загружать страницу жестко. Иногда вы не хотите потерять изменения, сделанные с помощью инструментов разработчика, а просто хотите перезагрузить CSS. В других случаях CSS так упорно кешируется, что даже обновление всей страницы не помогает. Сегодня мы узнаем, как перезагрузить CSS, не перезагружая всю страницу.

Используя JavaScript, мы можем добавлять новый номер версии к пути к файлу CSS в качестве параметра запроса каждый раз, когда вы обновляете CSS. Добавляя другой параметр запроса к URL-адресу, браузер обрабатывает его как уникальный URL-адрес и кэширует его отдельно, позволяя загрузить обновленную версию. Вы можете прикрепить эту функцию к кнопке (или комбинации клавиш клавиатуры в качестве сочетания клавиш), которая перезагружает CSS при каждом нажатии. Мы можем использовать текущую дату и время в качестве номера версии, поскольку это всегда будет новая и уникальная строка.

Синтаксис: Добавьте созданный файл CSS в формате ниже.
```
 <link rel = "stylesheet" type = "text / css" href = "css / style.css? version = #">
```

index.html с кодом 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 > 

CSS файл style.css:

 /* Coloring h1 tag */
 h 1 {
    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 ('ссылка');
      for (let i = 0; i <links.length; i ++) {
          if (links [i] .getAttribute ('rel') == 'stylesheet') {
        пусть href = links [i] .getAttribute ('href'). split ('?') [0];
              пусть newHref = href + '? version =' 
                           + новая дата (). getMilliseconds ();
              console.log (newHref)
              ссылки [я] .setAttribute ('href', newHref);
          }
      }
}) ();

JavaScript Вопросы о Web технологиях Picked HTML CSS-Misc HTML-Misc JavaScript-Misc CSS

Как перезагрузить CSS без перезагрузки страницы с помощью JavaScript?

РЕКОМЕНДУЕМЫЕ СТАТЬИ