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

Question

我试图在我的 JavaScript 代码中获取 CSS 变量的值。我正在使用以下代码片段来实现这一点。在这种情况下，我得到了我在 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

如果我不得不猜测，setTimeout() 在这里工作的原因是它为您的样式表加载提供了时间。换句话说，如果没有 setTimeout，您将尝试在 DOM 之前访问此 CSS 变量 - 更重要的是，您的样式表 - 已完全加载。尝试在 'load' 回调中执行您的代码：

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

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

Answer 2

So the JavaScript seems like it needs to wait for a moment for the CSS to finish loading.

这可能是通过网络获取 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
    });
}

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

您可能希望在 sheet 由于某种原因未加载的情况下应用一些超时或 error 处理程序。

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

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

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

Getting the value of a CSS variable with JavaScript requires setTimeout

javascript

css

settimeout