使用 JavaScript 获取 CSS 变量的值需要 setTimeout

Question

我试图在我的 JavaScript 代码中获取 CSS 变量的值。我正在使用以下代码 sn-p 来实现这一点。在这种情况下，我得到了我在 CSS 中定义的某种红色阴影。

let red = getComputedStyle(document.documentElement).getPropertyValue('--red')

问题是这段代码只有在我将它包装在如下所示的setTimeout 块中时才有效，

setTimeout(() => {
  let red = getComputedStyle(document.documentElement).getPropertyValue('--red')
}, 10)

所以 JavaScript 似乎需要等待一段时间才能完成加载 CSS。有没有一种方法可以获取 CSS 变量的值，而无需像上面显示的那样等待一段明确的时间？

我还发现，当我通过 VS Code Live Server 扩展运行我的应用程序时不需要 setTimout，但是当我通过文件资源管理器打开 HTML 文件时确实需要使用。

Answer 1

因此，JavaScript 似乎需要等待一段时间才能完成 CSS 加载。

这可能是通过网络获取 CSS 文件的时间。您可以使用指定 CSS 的 link 元素上的 load 事件来检测何时发生这种情况，以防止它已经被触发：

const link = document.querySelector(/*...selector for the link element loading the stylesheet...*/);
if (link.sheet && link.sheet.cssRules && link.sheet.cssRules.length) {
    // It's already loaded, get the variable
} else {
    link.addEventListener("load", function() {
        // It's loaded now, get the variable
    });
}

请注意，代码假定样式表至少有一个规则。

对于由于某种原因无法加载工作表的情况，您可能希望应用一些超时或 error 处理程序。

if 在现代 JavaScript 中使用可选的链接运算符可以更简洁：

if (link.sheet?.cssRules?.length) {

Answer 2

如果我不得不猜测，setTimeout() 在这里工作的原因是它给了你的样式表加载时间。换句话说，如果没有 setTimeout，你会尝试在 DOM 之前访问这个 CSS 变量——更重要的是，你的样式表——完全加载。尝试在“加载”回调中执行您的代码：

window.addEventListener('load', () => {
  let red = getComputedStyle(document.documentElement).getPropertyValue('--red');
}

这样，您的 Javascript 代码只会在加载样式表时执行。