Обновить случайное число в css href

CSS является статическим. Например: он всегда будет анализировать значение атрибута href как строку. Итак, учитывая вышеизложенное, он попытается получить доступ к {your-domain}/skin.css?cb=sessionStorage.cbVersion.

Если вам нужно, чтобы он был переменным, у вас есть два варианта:

• используйте любую логику, которая вам нужна, когда вы создаете HTML своей страницы на стороне сервера, используя язык, который вы используете на стороне сервера (php, Java и т.д...)
• использовать JavaScript на стороне клиента (когда страница была загружена в браузере).

Во втором случае вам не нужно использовать id, хотя это распространенный (и рекомендуемый) метод нацеливания на элементы. Но вам нужен способ уникальной идентификации вашего элемента, чтобы вы могли изменить его href.

Простой пример:

<link rel = "stylesheet" data-href = "dynamic-stylesheet">
<script>
  const link = document.querySelector('link[data-href = "dynamic-stylesheet"]');
  link.href = `skin.css?cb=${sessionStorage.cbVersion || 'defaultValue'}`;
</script>

Обратите внимание, что это не будет работать в StackOverflow, так как фрагменты изолированы и не имеют доступа к sessionStorage.

Также обратите внимание, что я полностью удалил href, поскольку, если он присутствует и недействителен, это приведет к ошибке 404, поскольку он будет проанализирован в момент анализа <link>, что должно быть до запуска вашего скрипта. Или, как вариант, можно вообще не иметь <link> и создать его с помощью JavaScript с желаемым значением href.

И последнее, но не менее важное: вы всегда должны указывать значение по умолчанию, когда cbVersion не найден в sessionStorage. Улучшенная версия приведенного выше скрипта будет использовать try/catch для получения значения sessionStorage и предоставлять defaultValue, если результирующее значение все еще ложно:

<link rel = "stylesheet" data-href = "dynamic-stylesheet">
<script>
  const link = document.querySelector('link[data-href = "dynamic-stylesheet"]');
  let cbVersion;
  try {
    cbVersion = sessionStorage.cbVersion;
  } catch(err) { 
    //console.info(err)
  }
  link.href = `skin.css?cb=${cbVersion || 'defaultValue'}`;
</script>

Как видите, приведенный выше код пытается загрузить https://stacksnippets.net/skin.css?cb=defaultValue (которого не существует) и не выводит ошибку о невозможности доступа к sessionStorage на SO.