使用JavaScript获取CSS变量值需依赖setTimeout，有无替代解决方案？

问题根因 #

问题本质是JavaScript执行时机早于CSS样式的加载、解析完成时机，setTimeout属于强制延后执行碰运气的方案，不同设备、不同网络环境下设置的固定时长大概率会失效。

不同环境表现差异原因 #

VS Code的Live Server走HTTP协议，浏览器对HTTP资源有成熟的预加载策略，CSS加载解析速度通常快于JS执行时机；本地file协议没有对应预加载优化，JS很容易抢在CSS解析完成之前执行，所以才会出现两种运行场景表现不一致的情况。

可靠解决方案 #

以下方案都不需要设置固定等待时长：

方案1：调整JS加载位置（最简单通用） #

把JS代码放在</body>闭合标签之前，所有CSS引用、DOM元素的后方，浏览器从上到下解析到JS时，前面的CSS已经完成解析，直接就能读取到变量：

<!DOCTYPE html>
<html>
<head>
  <!-- 内联CSS或者外部CSS引用 -->
  <style>
    :root { --red: #f5222d; }
  </style>
  <link rel="stylesheet" href="你的样式文件路径.css">
</head>
<body>
  <!-- 页面所有DOM内容 -->

  <!-- JS放在body最底部 -->
  <script>
    // 直接读取即可，trim()用于清理变量值前后的多余空格
    const red = getComputedStyle(document.documentElement).getPropertyValue('--red').trim()
    console.log(red)
  </script>
</body>
</html>

方案2：监听资源加载事件（适合JS必须放在头部的场景） #

如果业务要求必须把JS放在头部，可以监听页面资源加载完成事件再执行读取逻辑：

<head>
  <style>
    :root { --red: #f5222d; }
  </style>
  <script>
    // 监听页面所有资源（CSS、图片等）加载完成后执行
    window.addEventListener('load', () => {
      const red = getComputedStyle(document.documentElement).getPropertyValue('--red').trim()
      console.log(red)
    })
  </script>
</head>

如果只依赖单个外部CSS文件，可以单独监听这个CSS文件的加载事件，不用等其他无关资源加载，执行效率更高：

<head>
  <link rel="stylesheet" href="你的样式文件路径.css" id="main-style">
  <script>
    document.querySelector('#main-style').addEventListener('load', () => {
      const red = getComputedStyle(document.documentElement).getPropertyValue('--red').trim()
      console.log(red)
    })
  </script>
</head>

内容的提问来源于stack exchange，提问作者Michael