JavaScript-动态加载的CSS:CSS变量对JS不可见，但从CSS中计算

我通过JavaScript将一些样式表动态加载到我的应用程序中。在这个样式表中，我有不同的CSS变量，我想从我的JS中读/写

直接嵌入head标记中的样式表被正确处理。CSS变量由CSS计算，在JS中可见

在运行时动态加载的样式表确实有一些奇怪的错误。CSS变量由CSS计算，但JS不可见

有人有提示吗

具有最小错误演示的Plunker：

我用于动态加载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);
}

---

这是因为样式表不是在运行时加载的，因此JS直到稍后才可以访问CSS变量

要做到这一点，请将其添加到动态添加的样式表中，以便在完成加载时调用函数，例如

stylesheetLoaded（）

（因此JS可以访问）：

请注意，强烈建议在设置

href

属性之前附加

onload

处理程序

然后，您可以在该函数调用中执行所需的任何逻辑：

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

---

请参阅代码的概念验证分支：

，这是因为样式表没有在运行时加载，因此JS直到稍后才可以访问CSS变量

要做到这一点，请将其添加到动态添加的样式表中，以便在完成加载时调用函数，例如

stylesheetLoaded（）

（因此JS可以访问）：

请注意，强烈建议在设置

href

属性之前附加

onload

处理程序

然后，您可以在该函数调用中执行所需的任何逻辑：

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

---

请参阅您的代码的概念验证分支：

非常感谢，您救了我一天！非常感谢你，你救了我一天！