JavaScript - динамически загружаемый CSS: переменная CSS не видна для JS, но оценивается с помощью CSS

Question

Я загружаю некоторые таблицы стилей динамически через JavaScript в мое приложение. В этих таблицах стилей у меня есть разные переменные CSS, которые я хочу читать / писать из моего JS.

Таблицы стилей, которые вставляются непосредственно в тег head, обрабатываются правильно. Переменная CSS оценивается CSS и видна в JS.

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

У кого-нибудь есть подсказка?

Плункер с минимальной демонстрацией ошибки:

https://plnkr.co/edit/EChqjvZQJp7yz3L6nknU?p=preview

Метод, который я использую для динамической загрузки CSS:

var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "not_embedded_from_start.css");

document.getElementsByTagName("head")[0].appendChild(fileref);

Метод, который я использую, чтобы прочитать переменную CSS:

var cS = window.getComputedStyle(document.querySelector("html"));
var pV = cS.getPropertyValue('--foo');

Пример CSS:

:root {
  --foo: green
}

#foo {
  background-color: var(--foo);
}

Answer 1

Это связано с тем, что таблица стилей не загружается во время выполнения, и поэтому переменная CSS недоступна для JS до более поздней версии.

Для этого просто прикрепите onload обработчик вашей динамически добавленной таблицы стилей, так что она вызывает функцию, скажем stylesheetLoaded() когда это сделано загрузка (следовательно, доступна для JS):

var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.onload = function(){ stylesheetLoaded(); }
fileref.setAttribute("href", "not_embedded_from_start.css");

Обратите внимание, что настоятельно рекомендуется прикрепить onload обработчик перед установкой href атрибут

И тогда вы можете выполнить любую логику, какую захотите, в этом вызове функции:

var stylesheetLoaded = function() {
  cS = window.getComputedStyle(document.querySelector("html"));
  pV = cS.getPropertyValue('--baz');
  document.getElementById("baz").innerText = pV;
}

См. Пробную версию вашего кода: https://plnkr.co/edit/OYXk7zblryLs3F5VM51h?p=preview