JavaScript

Question

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

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

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

有人有提示吗？

具有最少错误演示的 Plunker：

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 访问。

为此，您到动态添加的样式表，以便它调用一个函数，比如 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");

请注意，强烈建议在设置 href 属性之前 附加 onload 处理程序。

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

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

JavaScript - 动态加载 CSS：CSS 变量对 JS 不可见，但从 CSS 进行评估

JavaScript - Dynamically loaded CSS: CSS variable not visible for JS but gets evaluated from CSS

html

css

css-variables